How to Make Your Navigation Appear on Scroll with jQuery
Fix it, and hide it
Make sure your navigation has a fixed position and is set to display: none. Here is some sample css:
.menu {
position: fixed;
top: 0px;
z-index: 9999;
width: 100%;
height: 75px;
background-color: #ddd;
display: none;
}Make it Fade In with jQuery
Here we are telling the menu to fade in at a speed of 500ms one we’ve scrolled past the 200px mark from the top of the page, otherwise fade back out.
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$('#menu').fadeIn(500);
} else {
$('#menu').fadeOut(500);
}
});
});