A new CSS property — position:sticky;

My blog colleague, Mike, wrote about implementing “sticky” menus in Javascript; however, it seems that this effect can be achieved in WebKit browsers through a new CSS property—position:sticky;.

By simply adding position: sticky (vendor prefixed), we can tell an element to be position: relative until the user scrolls the item (or its parent) to be 15px from the top:

At top: 15px, the element becomes fixed.

HTML5 Rocks has put together a demo although, of course, it will not work in anything other the latest version of Chrome or the WebKit Nightlies.

However, I can think of a couple of places where I should incorporate position:sticky; into our company’s CMS and shall do so, against the day when the property is widespread.

As a point of interest, this tends to be my general strategy for new CSS properties: I implement them into our systems so that, in the future, people get a nice surprise!

UPDATE 18/05/2014: position:sticky; seems to have appeared and disappeared more often than a flexbox spec. However, Can I Use reports that position:sticky; is supported on  Safari 6.1+ (on desktop and iOS) with the -webkit- prefix, and that support is coming to Firefox and Chrome in the near future.

2 comments

  1. Michael Chang

    I do the same thing with our intranet app(s) by using experimental CSS/JS/HTML features since we use Chrome exclusively for intranet apps.

    As far as “position: sticky”, I’m concerned. About 1-2 months ago I started using this property to enable sticky table headers (I applied it to the entire ). It worked like a dream. And now, at some point in the past week or so, it stopped working. I wonder if some idiot submitted an issue in the Chromium tracker and asked the Chrome team to disable this property when it’s applied to a table header. Aaargh! It was working so beautifully, too. I’ve even tried looking at other demos online where other people have done the same thing, and it doesn’t work there either. I made sure to go into Chrome’s “about:flags” page to enable experiemental features; still a no-go.

  2. Julian

    Actually you can omit every statement except of the webkit version, since Safari WebKit is the only rendering engine that supports it.
    Chrome needs additional settings and on Windows, they moved to blink, which is a fork of WebKit that does not support sticky positioning.

    I REALLY LOVE this value and I’d like to use it, but I think we have to wait for CSS5 until it’s standard.

    To have something like this was my wish since I started web development and I’m completely disappointed by the rare support!

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">