/blog/articles/

Postion: -webkit-sticky test

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

Martin Wolf

Hi, I’m Martin Wolf, a Freelance Frontend Web Developer from Germany.
I believe in hard work and sharing what I know.

Contact me

Interested in working with me? Fantastic! The best way to get in touch is by email (hello@martinwolf.org). I’m looking forward to hearing from you.