Grow your CSS skills. Land your dream job.

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?

    Live: http://test.dyllon.me/sticky/

    # 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:

    http://codepen.io/clokey2k/full/CrbEH/

    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.

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