Pascal’s Diary · Sticky position

This post is just a few experiments with sticky positioning. For the straight dope, visit CSS Tricks or MDN.

This is sticky

The above header is sticky. As you scroll down, the header will stick to the top of the viewport.

Aute incididunt culpa elit est, dolore. Elit est dolore, ad ea ullamco in nostrud. Lorem, nulla velit excepteur. Excepteur id culpa commodo ex incididunt consequat. Culpa commodo ex, incididunt consequat irure sunt. Incididunt consequat irure sunt commodo eiusmod. Irure sunt commodo eiusmod, irure incididunt. Consequat ex consectetur ad, ad qui. Ad ad qui aliqua incididunt cillum dolor proident. Qui aliqua incididunt cillum dolor proident in proident. Incididunt cillum, dolor proident in. Proident in proident nisi. Proident, nisi nostrud laborum officia deserunt. Laborum officia deserunt qui quis reprehenderit aute nulla. Deserunt qui quis reprehenderit aute. Quis reprehenderit aute nulla sint consequat.

Culpa reprehenderit labore in irure. Labore in irure sunt laborum. Irure sunt laborum reprehenderit elit, lorem. Reprehenderit elit lorem voluptate. Lorem voluptate fugiat, cupidatat. Cupidatat dolore, adipiscing nostrud. Nostrud minim, deserunt id. Id reprehenderit enim elit minim velit officia magna. Enim elit minim, velit officia. Velit officia magna ullamco commodo aliqua cupidatat et.

This is sticky inside a relative parent

The above element is sticky, inside a relative parent. As you scroll down, you’ll see that a relative parent doesn’t affect sticky positioning.

Excepteur eu sunt sunt sed, consectetur non. Sunt sed consectetur, non. Non aliquip qui est irure cupidatat id. Qui est irure, cupidatat id mollit occaecat consequat. Cupidatat id mollit occaecat, consequat aute. Occaecat consequat aute incididunt. Aute incididunt culpa elit est, dolore. Elit est dolore, ad ea ullamco in nostrud. Lorem, nulla velit excepteur. Excepteur id culpa commodo ex incididunt consequat. Culpa commodo ex, incididunt consequat irure sunt. Incididunt consequat irure sunt commodo eiusmod.

Irure sunt commodo eiusmod, irure incididunt. Consequat ex consectetur ad, ad qui. Ad ad qui aliqua incididunt cillum dolor proident. Qui aliqua incididunt cillum dolor proident in proident. Incididunt cillum, dolor proident in. Proident in proident nisi. Proident, nisi nostrud laborum officia deserunt. Laborum officia deserunt qui quis reprehenderit aute nulla. Deserunt qui quis reprehenderit aute. Quis reprehenderit aute nulla sint consequat.

This is sticky inside a parent with opacity: 0.9

The above element is sticky, inside a parent with a custom opacity. As you scroll down, you’ll see that opacity doesn’t affect sticky positioning.

Consectetur enim est anim proident. Est anim proident lorem, nostrud. Lorem nostrud occaecat mollit ullamco aliquip occaecat. Occaecat mollit ullamco aliquip occaecat irure. Ullamco aliquip occaecat, irure consectetur. Irure consectetur sit tempor eu. Sit tempor, eu ut duis. Ut duis reprehenderit ipsum fugiat incididunt.

Qui est irure, cupidatat id mollit occaecat consequat. Cupidatat id mollit occaecat, consequat aute. Occaecat consequat aute incididunt. Aute incididunt culpa elit est, dolore. Elit est dolore, ad ea ullamco in nostrud. Lorem, nulla velit excepteur. Excepteur id culpa commodo ex incididunt consequat. Culpa commodo ex, incididunt consequat irure sunt. Incididunt consequat irure sunt commodo eiusmod.

This is sticky inside a parent with a filter

The above element is sticky, inside a parent with filter: blur(1px). As you scroll down, you’ll see that filter doesn’t affect sticky positioning.

This is sticky inside overflow: hidden

The above element is sticky, inside a parent with overflow: hidden. You’ll see that it scrolls out of view instead of sticking, because any parent that crops overflow (in the x or y direction) will prevent position: sticky from working as expected.

This is sticky inside overflow-x: hidden

The above element is sticky, inside a parent with overflow-x: hidden. You’ll see that it scrolls out of view instead of sticking, because any parent that crops overflow (in the x or y direction) will prevent position: sticky from working as expected.

This is sticky inside overflow-y: hidden

The above element is sticky, inside a parent with overflow-y: hidden. You’ll see that it scrolls out of view instead of sticking, because any parent that crops overflow (in the x or y direction) will prevent position: sticky from working as expected.

This is sticky inside overflow: auto

The above element is sticky, inside a parent with overflow: auto. You’ll see that it scrolls out of view instead of sticking, because any parent that crops overflow (in the x or y direction) will prevent position: sticky from working as expected.