One of my favorite effects to use on sites that have a lot of scrollable content is a sticky nav. The idea with a sticky nav is that you can scroll down the page, but keep the navigation with you at all times. I made a nifty little script called stickyNav.js to make this possible!
Lets say you have a large header with iamges and such, and your navigation lives right below that, what stickyNav.js does is watch for a scroll to start and when that scroll passes a defined point it changed the navigation or header to have a position of fixed and scrolls with the user. Whats even better? It works for iPhones and iPads.
Mobile Safari does not play well with fixed positions, so to overcome this stickyNav.js checks to see if the site is being viewed on a mobile device and then rather than using the “fixed” position it animated the nav to its proper placement.
stickyNav.js is easy to use and only has 3 variables that need to be set to match your design.
$el – The element you wish to scroll
$scrolling – The position you wish for the element to assume while scrolling
$bounds – The boundary of when to change the element from absolute to fixed and vice-versa
Check out the demo to see it in action!