I am trying a state of affairs the place one header might be sticky, adopted by a subheader which is sticky, after which adopted by a desk header.
On this setup, I would like the .firstclass to change into sticky upon scrolling, the .second class to scroll, the .third class to change into sticky after the primary class, and eventually, the desk header to change into sticky after the second class. Please evaluate the code I am working with.
Thanks in superior for attempting to assist me.
<!DOCTYPE html>
<html>
<head>
<title>Web page Title</title>
<type>
.content material {
max-height: calc(100vh - 20px); /* Instance peak, modify as wanted */
overflow-y: auto; /* Add vertical scrollbar if wanted */
}
.table-container {
place: relative; /* Guarantee relative positioning for the sticky header */
}
desk {
width: 100%;
border-collapse: collapse;
}
thead {
background-color: #f1f1f1; /* Instance background coloration */
place: sticky;
high: 75;
z-index: 3; /* Make sure the headers are above the desk content material */
}
th {
place: sticky;
high: 75;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2; /* Instance alternating row coloration */
}
.first {
place: sticky;
high: 0;
z-index: 2;
peak: 25px;
}
.third {
place: sticky;
high: 25;
z-index: 2;
peak: 25px;
}
</type>
</head>
<physique>
<div class="content material">
<p class="first">I'm first sticky </p>
<p class="second"> I'm not sticky </p>
<p class="third"> I'm second sticky </p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tincidunt lorem. Nulla facilisi. Duis et tellus ut nulla facilisis fermentum. Aliquam volutpat, risus eget eleifend fringilla, leo mauris vestibulum libero, id vehicula odio elit et lorem. Morbi lacinia tristique justo a consectetur. Aliquam tempus urna vitae enim faucibus, vitae ultrices risus fermentum. Proin rutrum, nunc sed pellentesque congue, tortor neque hendrerit mi, ac ultricies dui nisl vel metus. Fusce auctor dolor ut odio accumsan, non ultricies lacus sodales.
</p>
<p>
Sed sed nisi at tortor ultricies hendrerit nec quis elit. Vivamus malesuada tellus nec dui viverra, nec fermentum dolor scelerisque. Donec dignissim mi vitae nisi fermentum fringilla. Sed ut lorem neque. Proin vestibulum, velit ut fringilla auctor, velit dui dapibus arcu, eget aliquam nisi arcu non dui. Mauris malesuada purus vitae sollicitudin fermentum. Nulla facilisi. Ut vel metus quis justo pellentesque feugiat vitae ut felis. Curabitur condimentum orci sit amet diam eleifend, ut luctus lorem dapibus.
</p>
<!-- Add extra paragraphs as wanted -->
<div class="table-container">
<desk>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<!-- Add 100 rows -->
<!-- Instance: -->
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr><tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<!-- Repeat this row 100 occasions -->
<!-- You need to use JavaScript to generate these rows dynamically -->
<!-- For simplicity, I will copy this row 99 occasions -->
<!-- Begin copying from right here -->
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information 3</td>
</tr>
<!-- Repeat this row 99 occasions -->
<!-- Finish copying right here -->
</tbody>
</desk>
</div>
</div>
</physique>
</html>
