H2 {position: sticky} [video]
This will be really awesome. For anyone who hasn't tried to implement a Sticky element before, it's actually not as trivial as you might think. (And when I was looking for an existing implementation, they didn't support the "constrain" effect that is explained in the video.<p>To do it correctly, you need to track the up to 4 different element positions.<p>You've got your actual sticky element, then you've got the parent of the element to ensure it's within the view port. Then you've got the scroll container as well. Plus, you might have a constrain/target node, to ensure that the sticky element doesn't extend passed an artificial bounding box.<p>Overall, doing all of these domGeometry/position calculations on each window.onscroll event leads to extremely inefficient JS. I ended up removing the Sticky altogether because on iOS it would basically make my application unusable.<p>Here was my implementation[1]. It was considerably harder to created than I expected it would be... coding advice/tips welcome.<p>[1] : <a href="https://gist.github.com/Kalyse/6534936" rel="nofollow">https://gist.github.com/Kalyse/6534936</a> (My personal Sticky implementation using Dojo).