I am looking to implement a sticky header effect on scroll, similar to the example shown here: () Check out the source site for more details: (https://github.com/davist11/jQuery-Stickem)
Currently, I have a full-screen video playing at the top of the page and I want the header to stick when the page is scrolled and it reaches the video. Additionally, there is a small border at the top of other pages that I want the scroll to bypass until it reaches this point and then stick.
To see what it looks like currently, click on this link: http://jsfiddle.net/wp7ornmv/
EDIT: Make sure to scroll in the HTML window
<div id="logo">
</div>
<div id="intro">
<video autoplay loop poster="images/work/bluesky.jpg" id="bgvid">
<source src="video/Peri_CloudLoop_BlueTV.webm" type="video/webm">
<source src="video/Peri_CloudLoop_BlueTV_3.mp4" type="video/mp4">
</video>
</div>
<div id="container">
<div id="content">
<div id="Mbackground">
<div id="Ncontainer">
<div id="Ncontain">
<div id="Nlogo">Logo
</div>
<div id="Nmenu">
<div class="Nlink"><a href="url">Contact</a>
</div>
<div class="Nlink"><a href="url">About</a>
</div>
<div class="Nlink"><a href="index.html" class="active transition">Work</a>
</div>
</div>
</div>
</div>
</div>
<div id="Mbackground">
<div id="Mbody">
<div class="Mrow">
<div class="Mcontainer">
<a href="project.html" class="transition">
<span class="link-spanner"></span>
</a>
<div id="Mimageone" class="Mimage">
</div>
<div id="Mborderone" class="Mborder">
</div>
<div id="Mboxone" class="Mbox">
<div class="Mtext">
<div class="Mtitle">Title
</div>
<div class="Msubtitle">Subtitle
</div>
<div class="Mdescrip">Descript
</div>
</div>
<div class="Meye">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footerhalf1">
</div>
<div id="footerhalf2">
<div id="footercontents">Made by
</div>
</div>
</div>