Sounds like booger? Nope, it’s what’s been brewing in browsers and hopefully it becomes a standard. The basic syntax is:

[code lang=”css” title=”CSS”]
div {position:sticky;}
[/code]

We already have position:fixed and it sticks!

Well, if you’re familiar with the CSS propety-value position:fixed, it fixes the position of an element relative to the viewport (and not its parent element)–so that when you scroll the screen, the element stays where you tell it to. That’s one of its caveats: it escapes any parent and becomes relative to the viewport or in other words, it escapes the layout.

position:fixed sticks but we don’t have much control over it like if we want the element to be contained to its parent element. On the other hand, position:sticky is more like position:absolute (the power of being relative to its parent) + position:fixed (the power to stay where you tell it to).

What’s more to sticky?

The proposal is that you could define its top, right, bottom, and left values to be detected relative to the viewport–and this is the time when sticky will be activated. For example:

[code lang=”css” title=”CSS”]
div {
position:sticky;
top:10px;
}
[/code]

Wherever this div is located, when you scroll the screen and this element is exactly 10px from the top of your viewport, it will become sticky so that when you scroll farther away, that element stays in your view (you can do this to position:fixed but with the help of JS for the activation part).

One last thing, I propose it be named, stick as in, position:stick.