1. Web Design
  2. jQuery

Quick Tip: Sticky Navigation, Without the Awkward Jump

Read Time:1 minLanguages:

“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 DesignEssential JS Libraries for Web DesignEssential 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

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.