🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Overscroll Section

Section overlapping visible content on scroll.

View Demo


All components are based on CodyFrame.

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 class="overscroll-section__scroll-content js-overscroll-section__scroll-content">
    <!-- scrolling section content -->

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

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us