Blog, Learn Tech Skills, Learn to Code

Project: Sticky Sidebar

Make your navigation 22% faster and 100% of your users happy with a sticky sidebar.

Ohhh those ubiquitous sticky sidebars! You know the type: the ones that stick around even when you scroll down a page. They are always there, enticing you with a “related article” or a newsletter list to join or, even better, an ad to click on.

Sticky sidebars are definitely trendy, but there’s good reason for it. As more and more content is being pumped onto the web, a website’s success is made by its ability to keep you around. The best way to do that? Ply you with new things to look at!

The thing is, the Web is fast paced. Every second counts. And regular, static navigation is simply slower than sticky navigation. 22% slower in fact, and at scale, 22% is a big percent. Plus, when Smashing Magazine conducted a usability test on stick navigation menus, 100% of users preferred the sticky menu.

Who can argue with a result like that?

Skills: HTML, CSS, JavaScript & jQuery

1. Scroll/Follow Sidebar, Multiple Techniques, by Chris Coyier

2. Code a Scrolling/Following Sidebar with WordPress Functionality, by Adam Scott

3. StickyMojo.JS

4. Sticky Sidebar jQuery plugin, by Phil Parsons

5. Tutorial: jQuery ‘Sticky Sidebar’, by Andrew Henderson

Have you added sticky navigation to your site? We want to see it! Drop us a link in the comments.