Take me back!! I want my CSS!! Click me to get back :)

×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

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.

Your email address will not be published.

2 comments

  1. One thing to keep in mind when using a sticky sidebar is don’t give it a delay. I’ve seen this on many sites (where the sidebar is delayed for about 1 second and then ‘catches up’) and it is the most distracting thing you can possibly have on a site. The last thing you want is to distract people from your content.

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.