I asked a question here a couple weeks ago about getting sticky headers to switch out, much like they do in the iPhone Instagram app. I was pleased when someone answered my question with exactly what I was looking for. Unfortunately I was playing around with it in a different setting and I can’t seem to get it to work. Here is the original that works: (http://codepen.io/chrissp26/full/gBrdo)
Here is what’s acting up: (http://codepen.io/anon/full/sAHuy)
Basically I need the sub-headers to switch and ‘push up’ like they do in the first example, while keeping the main header section, the section on top, the same. The sub-sections need to push under the main header, not over it.
Any help is greatly appreciated.
The jQuery code is waiting for the element to touch the top of the screen and not 45 picels from the top like how you stated in the CSS. See lines 322-337.