Although this question has been asked previously, I have searched extensively for something similar to this - Incredible Things
You can find what I have at
Below is the code snippet:
<div id="myElement">
<div id="nav">
<a href="">Home</a>
</div>
</div>
<style>
#myElement {
background-color: #fff;
color: #fff;
font-family: 'Bitter';
font-size: 13px;
letter-spacing: 1px;
line-height: 40px;
margin-left: -180px;
opacity: 0.9;
text-align: center;
text-transform: uppercase;
width: 1280px;
word-spacing: 20px;
z-index: 5000;
}
</style>
<script type="text/javascript">
var yPosition; // save original y position of element here
window.onload = function(){ // once entire page is loaded this function is fired
// save original y position of element before it is scrolled
yPosition = document.getElementById("myElement").offsetTop;
}
window.onscroll = function(){ // scrolling fires this function
var myElement = document.getElementById("myElement"); // for cleaner code
// compare original y position of element to y position of page
if( yPosition <= window.pageYOffset ){
// snap element to the top by changing css values of element
myElement.style.position = "fixed";
myElement.style.top = "0px";
}
else {
// re-position to original flow of content
myElement.style.top = ""; // set to default
}
}
</script>