Sticky Scroll

Use the sticky-scroll module to pin elements on scroll.

This module requires GSAP ScrollTrigger, so make sure to have it (along with the GSAP core) loaded in first.

Examples

Basic

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Desktop Only Sticky Scroll

Note the use of the attribute data-sticky-scroll-breakpoint, which specifies the media query at which the sticky scroll functionality should be enabled.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi expedita consequuntur consequatur quibusdam accusantium soluta aliquid eum excepturi magni, quidem commodi velit omnis maiores quod cum! Dolore similique culpa deserunt.