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.. http://web3canvas.com/item/sensitive-sticky-navigation-with-jquery/

    # 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,
    -Elijah

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".