Lock a div on the screen after so much of it has s

Question

I'm currently trying to find a way to lock my header on the screen after most of it has scrolled off the top.

So, if for example, my header was 150 pixels high, is there anyway I could lock the bottom 15 pixels at the top of the screen after the top 135 pixels have scrolled off the top as the user scrolls down my page? So that no matter how long my page becomes, there will always be the bottom 15 pixels of my header at the top of it.

I also need to reverse this when the user scrolls back up, so that the header can return to it's original state.

I've tried a dirty work around whereby having another header 15 pixels high with a "fixed" position layered behind my original header, so that when the full 150 pixel original one goes off the screen my new one appears out from behind it. This does work, but if the user catches it at mid point it looks disgraceful.

I have extremely limited knowledge of JavaScript and fear that may be where my answer lies.

Answer 1

I am somewhat confused about what you want.. and from what youre saying.. I think you did about the same thing as I did.. but you didnt like it for some reason..

Anyhow.. if i got you right, this should work.

http://jsfiddle.net/5pJuJ/

Essentially there is element that is positioned fixed which is behind the header and it is fixed at the top and is therefore revealed once you scroll down.

---

Oh, right.. this doesnt work so well if theres like a gradient or something.. Was that the problem?

I did this to demonstrate the problem that I think youre having.. http://jsfiddle.net/5pJuJ/1/ ( which i think you shouldve provided... grr.. )

---

This seems like it does just what you want pretty well:

http://imakewebthings.github.com/jquery-waypoints/

http://imakewebthings.github.com/jquery-waypoints/sticky-elements/