The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Sticky Navigation

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #36876

    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.


    Check out the jQuery Waypoints plugin.


    here is an interesting approach to Sticky navigation, Only shows navigation when user really wants to be..


    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,

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.