Skip to content

Usage

<div data-sticky-root>
  <div class="sticky theme container" data-sticky>
    <h2 style="text-align: center">Sticky Header</h2>
  </div>
  <div>
    <div class="l-stack">
      <div style="min-height: 200vh">
        <h2>Start Scrolling</h2>
      </div>
    </div>
  </div>
</div>

A header that sticks to the top of the viewport as users scroll.

How position sticky works

There are 3 parts to getting position: sticky to work.

  1. Sticky item - the element with position: sticky applied.
  2. Sticky container - the parent of the sticky item. When an element has position: sticky applied, it’s immediate parent is automatically defined as the sticky parent.
  3. Sibling content - the sticky item must have adjacent content to float above.

Scroll Padding

If you need to link to sections within a page using a sticky header, use scroll-padding-top or scroll-margin-top to ensure the content clears the sticky header. You can view a demo here. Note that the scroll padding is applied to the <html> element, it will not work otherwise.

Scroll Listener

This component uses a scroll listener to check whether the header is stuck vs unstuck. To avoid scroll jank, the option passive: true has been added. Learn more about passive listeners here.