Sticky Element Example

Making every pixel count since 1984.

Most browsers support position: sticky;, however there are times when it might not work, like when your element is inside an overflow: hidden;, or IE11. This Pen is for those times.

This is a Javascript solution that will set your element to position: static when it needs to scroll and then position: fixed when it needs to stick (stop scrolling).

Other Concerns

Debouncing can be problematic on iOS. Intersection Observer may be able to help.

Throttling and Debouncing are different. For scroll and resize events I believe debounce is what you want.

Help! It’s not working!

Keep in mind, we are using position: fixed to make it stick, so...

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.

This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.