“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
Follow me in my new course on Tuts+ as I walk through 15 JavaScript libraries, including Waypoint.js, demonstrating each one with clear examples and exercises.
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!
Further Resources
-
Essential JS Libraries for Web Design on Tuts+
- 30 Days to Learn jQuery on Tuts+
- Bower: a package manager for the web
- Pro Front-End Workflows: Yeoman on Tuts+
- jQuery Waypoints
By
