64x64 icon dark hosting
Choose a hosting plan here and get a free year's subscription to Tuts+ (worth $180).

Quick Tip: Sticky Navigation, Without the Awkward Jump


Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)

“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. 

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!

Further Resources