How To: overlapping sections on scroll

Hello 👋!

Today I wanted to share how you can create on-scroll overlapping sections with some basic CSS. When building my portfolio website, I wanted the homepage to have a special on-scroll feature that felt unique but not overwhelming. I found what I was looking for on SuperHi’s tutorial: “Parallax overlapping sections using sticky positioning”. It was easy, elegant – just what I was looking for.

You can also view the code I used to do this on codepen 👇

1. Organize your content into sections. In my codepen example, I organized my content sections using the <section></section>html tag.

2. Add the following CSS to each section.

   section {
   position: sticky;
   position: -webkit-sticky;
   top: 0;
   }