Getting a sticky header to “push up”, like in Instagram's iPhone app using CSS and jQuery

Question

The Instagram app has a nice sticky header that pushes the current one up in place of the new one. I found a great tutorial on how to do this natively for Android, but I\'m

Answer 1

I was having trouble getting Chris' answer to work accurately for me as all the stickies were inside a relatively positioned div (with a header above it all, outside of the relative div) - the answer to this is just storing the .offset().top of the relative container div in a var and subtracting it from the .css('top', value) in the script. As in chris' version, the top value is pushing off the top of the document which works fine. When you add in the relative div, top is now pushing from the top of that instead, so any space above the relative div is included in the value which is something you wouldn't want. Hope this helps someone else. James