1. Web Design
  2. CSS

Sticky Positioning with Nothing but CSS


Sticking elements, when the user scrolls to a certain point, has become a common pattern in modern web design. You’ll see it applied to top navigation, the sidebar, share links, or perhaps advertisements; retaining visibility within the viewport as the user scrolls. 

Historically we’ve needed JavaScript to do this. However, sticky behaviour has been proposed (and drafted) as a new standard (the sticky position), allowing us to achieve the effect with pure CSS. Let’s take a look at how it works!

Sticky Position

sticky is a new value for the position property, added as part of CSS3 Layout Module Spec. It acts similarly to relative positioning, in that it doesn’t remove anything from the document flow. In other words, a sticky element has no effect on the position of adjacent elements and doesn't collapse its parent element.

Given the following example, we set the #sidebar position to sticky along with top: 10px. The top value is required and specifies the distance from the top edge of the viewport where the element will stick

Now, as we scroll the page, when the sidebar’s distance from the top of the viewport reaches 0, the sidebar should stick, effectively giving us a fixed position. In other words, the sticky is kind of a hybrid between relative and fixedposition.


Additionally, the sticky position will work within a scrolling box or an overflowing element. This time we’ll set the top to 15px to give some more space above the sidebar when it’s stickily positioned (yes, that’s a word).

The sidebar will remain sticky all along the parent’s height (ie: when the bottom of the parent reaches the bottom of the sidebar, it will “push” it off the page once more.)

Easy, isn't it?


If you are viewing these demos in Chrome, Opera, or Internet Explorer (and Blink), you will have realised by now that they don’t work. These browsers do not yet support the sticky value.

CSS Sticky position browser support

In Chrome 28, as it switched to Blink engine, Chrome decided to remove the sticky position from its code-base, and it even removed the option to enable it through the chrome://flags page. The reason being:

“The current implementation of position sticky in Blink does not integrate correctly with compositing or scrolling. We eventually want to implement position sticky, but the current implementation is getting the way of work to improve scrolling and compositing. Once scrolling and compositing are in better shape, we can re-introduce position sticky in a way that integrates correctly with the rest of the system.

Once alternative is to apply a polyfill to simulate the effect in non-supporting browsers.

Using the Polyfill

To help out our non-supporting browsers we will be using stickyfill developed by Oleg Korsunsky. The polyfill works nicely in various circumstances. Whether the designated element has padding, margins, borders, been floated, or formed with relative units like em and percentage, the polyfill will accurately mimic the CSS sticky position behavior. And using stickyfill is equally intuitive.

To begin, grab stickyfill.js (optionally with jQuery, if you are more familiar with and prefer using jQuery for selecting elements). Link these libraries within your HTML document. Then initiate stickyfill with the designated element, as follows:

If you are using jQuery, you could write the following instead:

Now, our sticky sidebar should work across browsers including Chrome and Opera. The polyfill is smart enough that it will only run in non-supporting browsers, otherwise it will be completely disabled, stepping aside for the browser’s native implementation.


There are a couple of other things to note before you take the plunge and use sticky position on your websites:

  • First, the height of the parent container should be greater than the sticky element.
  • Whilst Safari natively support CSS sticky position (albeit prefixed), it won't come into effect when the sticky position is used under an element with CSS display: table;. This is a bug.
  • The polyfill has its own shortcomings, in that it won’t work within an overflowed box.
  • At the time of writing, there is no JavaScript event handler for sticky to identify when the element is stuck. Such an event could be useful, for example, to add additional classes when the element is stickified (that might not be a word).

Closing Thoughts

CSS sticky position could be a brilliant tool if you simply need a plain sticky element. If your need grows beyond that though—say you want to add some fancy effects upon the sticky element—you’ll still be better off opting for a JavaScript library like Waypoints.js with its sticky module.

Nonetheless, we hope to see some major improvements to CSS sticky, with regard to its capability as well as browser support, very soon.

Further References

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.