With the introduction of iOS7 we also get a new mobile Safari which, as the upcoming Safari 6.1 for desktops, supports position: -webkit-sticky;
. This is something like a hybrid of position: static
and fixed
. The element is static until it'd be scrolled out of the viewport and then gets fixed. It's easy to implement and would be a nice addition to our CSS tool belt if it gets implemented in every major browser.
You can see it in action in this CodePen. Remember: Only on Safari for iOS7 or Safari 6.1 beta.
Update: The CodePen only works with Safari 6.1 and not on iOS. That's because of some iframe embed issue thingy I think. But I tested it locally on iOS7 and it works fine.
Update: Another update! Chrome 29 implemented position: sticky;
. Prefix free! \o/
See the Pen Postion: -webkit-sticky test by Martin Wolf (@martinwolf) on CodePen