CSS Sticky Navigation

[rhodesy]

Hi guys,

the recent Happy Cog redesign has prompted me to try and work out how the ‘sticky’ navigation effect is achieved. I can do the standard floating navigation (like here for instance, which is achieved using ‘position: fixed;’ but I’m wondering how to achieve the sticky navigation whereby it only becomes fixed at the top of the screen after you scroll past a certain point. You can see a similar effect here, although I don’t know if they were achieved using the same technique. Ideally I’d like to be able to achieve the effect without using Javascript, but I’m not sure if that’s possible!

Thanks a lot for your help.

[Mottie]

Check out the jQuery Waypoints plugin.

[surjithctly]

here is an interesting approach to Sticky navigation, Only shows navigation when user really wants to be.. http://web3canvas.com/item/sensitive-sticky-navigation-with-jquery/

[ElijahFowler]

Unfortunately, doing that kind of function with just CSS is impossible. The above jQuery plugins could work for you, but in addition to that I would suggest ScrollToFixed. It’s simple and has a lot of functionality.

Good luck with your project,
-Elijah

[Author]

Posts