Stick to top then drop in css - [I have example site]
I've just discovered this great site about art. I am curious about they can make the left header Stick to the top then stop and specific place. Due to my understanding the
position: absolute; should stick on top all the time, shouldn't it ?
Yes, it appears to use JS to create that effect. The easiest way to tell is to hit Inspect Element in Chrome/Chromium, then Scroll past the article - notice how the inline
position property changes as you scroll. That can only happen via JS.
More than that, it's hard to say, because all of their scripts are minified, but I assume it uses
jQuery.scroll()'s callback to detect which article is showing and then based on that triggers the fixed/absolute style swap to allow the headers to scroll or not.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here