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 👇
- Organize your content into sections. In my codepen example, I organized my content sections using the <section></section>html tag.
Add the following CSS to each section.