Hello 👋!

gif of me scrolling through the mobile version of my website. Each section overlaps the other on scroll

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;
    }