position: sticky problem

With the release of Chrome 56 position:sticky now has pretty good browser support. This article describes a few gotchas you might encounter if you're trying to integrate sticky positioning into an existing layout. If position sticky is not working for you read on!

Sticky Positioning

First a quick recap, MDN provide a good explanation of how sticky positioned elements should behave.

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

This is a common UI design pattern that has traditionally been achieved with a bit of JavaScript. Although the JS approach works pretty well, binding to scroll event listeners can be expensive. So it makes sense to use CSS to achieve this behavior where possible.

Implementation

.Sidebar {
    position: sticky;
    top: 3em;
}

The top property specifies the point where the element becomes sticky.

Not working as expected?

As you can see it's easy to implement. However, if your element isn't sticking as expected the first thing to check are the rules applied to the container.

Specifically, look for any overflow property set on the parent. You can't use : overflow: hidden , overflow: scroll or overflow: auto on the parent of a position: sticky element.

If you're not using overflow and still having problems it's worth checking if a height is set on the parent? This may constrain the sticky positioning, stopping it from occurring. Remove the height and see if that fixes the problem.

The pen below demonstrates how the issues described above may occur. Switch to CSS and uncomment the rules to see how sticky positioning is affected.