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!

One comment

  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.

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="">