“Sticky navigation” describes a navigation bar which appears to stick to the top of the page once a user starts scrolling. It's a commonly used approach these days, as it gives users constant access to site navigation and fixes the site branding firmly in view at all times.
Sometimes, however, when a navigation bar is made sticky, there's no allowance made for the fact that it's removed from the document flow, causing an awkward jump as the page content shunts upwards. Today we're going to use jQuery to implement our own sticky navigation, then we're going to use an alternative approach with the Waypoints.js plugin to give us the seamless effect we’re looking for.
Essential JS Libraries for Web Design
Throughout the course we'll install and maintain each package with Bower, helping you practice sound workflow as well as giving you extra skills for your web design tool belt!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post