Sticking elements when the user scrolls to a certain point is a common pattern in modern web design. You’ll see it applied to top navigation, the sidebar, share links, or perhaps ad blocks; retaining visibility within the viewport as the user scrolls.
position: sticky), allowing us to achieve the effect with pure CSS. Let’s take a look at how it works!
sticky is a new(ish) 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
position: sticky will work within a scrolling box or an overflowing element. This time we’ll set the
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?
In the last couple of years browser support for CSS position: sticky has taken huge leaps. From the chart you’ll see it enjoys excellent coverage, although many supporting browsers (such as Chrome and Edge, both of which use the Blink rendering engine) still struggle when CSS sticky is applied to
Additionally, as mentioned earlier, Safari offers full support but requires use of the
Using the Polyfill
To help out our non-supporting browsers (not that there are many nowadays) we can use 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.
- The polyfill has its own shortcomings, in that it won’t work within an overflowed box.