Ah! I see it now. Using the word ‘sliding’ threw me off. What you’re looking for is a ‘sticky’ nav. You’ll need to use JS to calculate the user’s scroll position and then decide at what point you’ll want it to become sticky.
In this case, you’d want to do something like this:
var cutOff = headerHeight - navHeight;
In this case, cutOff is the point at which when a user is scrolling the top of the window will hit the top of the nav.
You can get the user’s scroll position like this:
var scrollPosition = $(window).scrollTop();
Then you’ll just need a simple conditional:
if( scrollPosition > cutOff ) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
Then in your CSS file you’d have a sticky class:
.sticky {
position: fixed;
}
Lots of other small stuff would need to be done, but that is the basic concept. I’m sure there are some tutorials around the web for ‘sticky nav’. Just make sure you don’t just grab some super bloated code from somewhere!
