The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Sticky header that scrolls in and out of view

  • # June 19, 2014 at 4:56 pm

    Hey guys, I’ve been working on a script in jQuery to have a sticky header that hides when the user scrolls down and scrolls back into view and sticks to the top when the user scrolls up. I currently have a live site with some code that works how I want it in firefox but not in all browsers. is there already a library that does this? / can you help me with my code?


    # June 20, 2014 at 2:23 am

    It’s hard to tell what the heck is going on, even in FF, the top bar seems to work in Chrome & FF but there doesn’t seem to be a lot else on the page.

    # June 24, 2014 at 1:39 pm

    Rather than calculating where on the page you are, why not worry about the movement change and constrain the results – see this Pen:

    One caveat to mention is the fixed height/padding on the header and content container.

    I hope this helps.

Viewing 3 posts - 1 through 3 (of 3 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