Search code examples
htmlcssfixedparallaxsticky

Create "overlapping" effect upon scroll using HTML and CSS

Evening, folks! I need a quick hand with the development of my website.

I've been looking for a method that would allow each section of my website to scroll over the last; almost like a vertical slideshow? I'll try to explain as best I can without making things too complicated.

So, I have an area that covers the viewport entirely, like so;

header {
    width: 100vw;
    height: 100vh;
    background-color: #3498db;
}

The header is then followed by a section of content. The content itself is irrelevant but the website consist of several sections, like so;

section {
    width: 100%;
    height: auto;
    overflow: auto;
    padding: 100px 0;
}

Now, here's the effect I'm trying to achieve:

Once the user scrolls, the header remains "fixed", and the next section (let's call it section a) scrolls over the header. Then, once section a meets the top of the browser window, it becomes sticky (fixed to the top). I then want section b to perform the same action- scroll over section a.

Hopefully, I've managed to explain what I'm looking for with enough detail! If anybody needs any additional information such as some code snippets or images, let me know! I fear the solution is extremely simple, and I'm simply unable to see it at the moment.

Perhaps a fresh pair of eyes is all I need!

Also, I'd like to avoid using JavaScript, as I'm fairly certain this can be done without it.

Thanks a lot, guys!

Solution

  • This is possible with the position: sticky property, but sticky has very poor support. Here's the specification.

    If you care about cross browser support (in most cases you really should) then you'll likely need to use JavaScript for this.

    This example will only work in certain versions of Firefox & Safari.

    .header,
.part {
  padding: 10px;
  position: sticky;
  width: 100%;
  height: 100vh;
  
  top: 0;
  
  box-sizing: border-box;
}

.header {background-color: #ddd;}
.part:nth-of-type(1) {background-color: red;}
.part:nth-of-type(2) {background-color: green;}
.part:nth-of-type(3) {background-color: blue;}
    <div class="header">Header</div>
<section class="part">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt rerum debitis cum nemo voluptate accusamus architecto iure eaque itaque! Dolorum distinctio numquam veritatis voluptate necessitatibus, veniam nesciunt consequuntur expedita facere sapiente eius magnam cumque perferendis laudantium eum, similique at ratione aut animi quidem labore. Dolor cumque soluta aperiam ab suscipit accusamus repudiandae quos corporis, voluptatibus, neque sequi aliquid quia quisquam voluptatum tempora possimus reiciendis ea beatae deleniti et corrupti, tempore cupiditate ullam. Mollitia expedita non, odio dolorum qui pariatur corporis eveniet iusto natus excepturi laboriosam tempore quas eligendi. Fuga omnis tempore fugit voluptas aperiam, vitae maxime ratione placeat! Blanditiis, incidunt!</section>
<section class="part">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta vero quis blanditiis nihil similique eius, ullam aliquid aspernatur. Debitis, qui quis odio deserunt, vitae corporis dicta, eveniet enim nisi eos quibusdam. Aperiam dolorem quidem ad, consequuntur quis! Adipisci natus, officiis soluta nisi iusto, aperiam blanditiis, omnis numquam dignissimos quas facilis!</section>
<section class="part">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis dolor libero officia perspiciatis vitae adipisci pariatur similique architecto veniam eum quos laboriosam laudantium sint praesentium aut, quibusdam vero amet dolores perferendis. Aperiam cumque corporis porro quo reprehenderit, dolor labore vel.</section>