Sticky Heading
Section one
Section two
Section three
.scroller { height: 300px; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-padding: 40px; } .scroller section { scroll-snap-align: start; }
<article class="scroller"> <h1>Sticky Heading</h1> <section> <h2>Section one</h2> </section> <section> <h2>Section two</h2> </section> <section> <h2>Section three</h2> </section> </article>