I am attempting to create a section that remains fixed as you scroll, allowing the inner articles to scroll by 100vh within the section. Essentially, I want to have a block of section with a height of 100vh and then scroll the inner articles by 100vh:
HTML :
<section class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis similique
expedita dolore, suscipit,
velit temporibus iusto ad, praesentium officia nemo nihil rerum necessitatibus excepturi
possimus
tempora maxime quam dolor culpa.</section>
<section id="process">
<article><h1>THIS IS ARTICLE 1</h1></article>
<article><h1>THIS IS ARTICLE 2</h1></article>
<article><h1>THIS IS ARTICLE 3</h1></article>
<article><h1>THIS IS ARTICLE 4</h1></article>
<article><h1>THIS IS ARTICLE 5</h1></article>
</section>
<section class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis
similique expedita dolore, suscipit,
velit temporibus iusto ad, praesentium officia nemo nihil rerum necessitatibus excepturi
possimus
tempora maxime quam dolor culpa.</section>
CSS :
#process{
width: 100%;
position: relative;
z-index: -1;
background: black;
color: white;
font-size: 5rem;
height: 100vh;
}
#process article{
width: 100%;
height: 100vh;
max-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.lorem{
width: 100%;
height: 100vh;
font-size: 3rem;
}
I am looking to achieve a scrolling effect where when the page reaches the second section, it becomes fixed on the screen. The inner articles will scroll within this fixed section, maintaining the same background. Once the user finishes reading the articles, the page will continue scrolling to the third section. How can I accomplish this?
EDIT :