Создайте эффект «перекрытия» при прокрутке с помощью HTML и CSS

Question

Вечер, ребята! Мне нужна быстрая помощь в разработке моего веб-сайта.

Я искал метод, который позволит каждой части моего сайта прокручивать последнее; почти как вертикальное слайд-шоу? Я постараюсь объяснить как можно лучше, не сделав слишком сложным.

Итак, у меня есть область, которая полностью закрывает область просмотра;

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

Затем заголовок содержит раздел содержания. Сам контент не имеет значения, но веб-сайт состоит из нескольких разделов:

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

Теперь вот эффект я пытаюсь достичь:

После свитков пользователя, заголовка остается «фиксированным», и следующий раздел (давайте назовем его участка а) свитки надзаголовок. Затем, как только раздел a встречает верхнюю часть окна браузера, он становится липким (фиксируется сверху). Затем я хочу, чтобы раздел b для выполнения такого же действия-прокрутки надраздел a.

Надеюсь, мне удалось объяснить, что я ищу достаточно подробно! Если кому-то нужна дополнительная информация, такая как некоторые фрагменты кода или изображения, дайте мне знать! Я боюсь, что решение очень просто, и я просто не могу это увидеть в данный момент.

Возможно, свежая пара глаз - это все, что мне нужно!

Кроме того, я бы хотел избежать использования JavaScript, поскольку я уверен, что это можно сделать без него.

Большое спасибо, ребята!

Answer 1

Это является возможно с position: sticky собственности, но sticky имеет очень poor support. Вот specification.

Если вам небезразлична поддержка кросс-браузера (в большинстве случаев вам действительно нужно), вам, скорее всего, понадобится использовать JavaScript для этого.

Этот пример будет работать только в определенных версиях 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>