Get a free trial // Grow your CSS skills // Land your dream job

CSS Sticky Navigation

  • # February 27, 2012 at 1:34 pm

    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.

    # February 27, 2012 at 2:11 pm

    Check out the jQuery Waypoints plugin.

    # April 24, 2013 at 9:11 am

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

    # April 24, 2013 at 12:18 pm

    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)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed