Sticky header that scrolls in and out of view

[makeshift67]

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/

[Paulie_D]

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.

[clokey2k]

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/pen/CrbEH

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.

[Author]

Posts