Overscroll Section

Section overlapping visible content on scroll.

How to

The Overscroll Section component is a section that overlaps the content of a previously visible element while scrolling. 

Make sure to wrap your two sections (sticky + scrolling) in a container with a class of .overscroll-section.js-overscroll-section.

The first (sticky) section will have a class of .overscroll-section__sticky-content.js-overscroll-section__sticky-content while the second (scrolling) section will have a class of .overscroll-section__scroll-content.js-overscroll-section__scroll-content:

<div class="overscroll-section js-overscroll-section">
  <section class="overscroll-section__sticky-content js-overscroll-section__sticky-content">
    <!-- sticky section content -->
  </section>

  <section class="overscroll-section__scroll-content js-overscroll-section__scroll-content">
    <!-- scrolling section content -->
  </section>
</div>

The effect is visible only if .overscroll-section__sticky-content height is equal or bigger than the viewport height.

Categories

• Content and Layout > Hero
• Effects > Scroll

Bug report & feedback

Component Github page ↗