I am currently trying to create a section that consists of different subsections. Each subsection has a title and content. When scrolling through this section, the titles should always be fixed in the viewport. The first title should be fixed at the top of the viewport, the next title below the previous one and so on.
I am currently solving the whole thing by making the individual subsections sticky. I then always set the top position so that it includes the height of the previous titles. However, as soon as the complete section scrolls out of the viewport, the fixed titles do not scroll out of the viewport together with the last one, but the last one sits on top of the previous ones and scrolls over them.
How could I implement it so that all titles scroll out together at the end?
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.section {
border-bottom: 1px solid #ccc;
}
.section.placeholder {
height: 30rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}
.category-component {
position: sticky;
background: white;
}
.category-component:nth-child(1) {
top: 0rem;
}
.category-component:nth-child(2) {
top: 3rem;
}
.category-component:nth-child(3) {
top: 6rem;
}
.category-title {
display: flex;
flex-direction: column;
justify-content: center;
height: 3rem;
background-color: lightgrey;
z-index: 1000;
padding: 10px;
font-weight: bold;
}
.category-content {
padding: 20px;
margin-top: 0;
/* Reset margin */
}<html>
<div class="section placeholder">
Placeholder Section
</div>
<div class="section">
<div class="category-component">
<div class="category-title">Heading 1</div>
<div class="category-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend,
ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet
urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra
lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer
vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo
sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor
libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.</p>
</div>
</div>
<div class="category-component">
<div class="category-title">Heading 2</div>
<div class="category-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend,
ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet
urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra
lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer
vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo
sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor
libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.</p>
</div>
</div>
<div class="category-component">
<div class="category-title">Heading 3</div>
<div class="category-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend,
ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet
urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra
lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer
vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo
sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor
libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.</p>
</div>
</div>
</div>
<div class="section placeholder">
Placeholder Section
</div>
</html>Here is also a link to a codepen with the same code: CodePen
I am happy about any help! Thank you very much!
In order to set section always visible then you need to use viewport of whole page 100vh, last section calculate with
calc(100vh - 16rem)this works on desktop width size ~(1024px) . Edit - now works on on mobile size withheight: calc(100vh - 28vh);in.section.placeholderexample snippet: