<div class="stick-container">
<h1 class="sticky">
Header
</h1>
<p> Some text to allow the sticky header to stick! </p>
<p> This paragraph will continue to scroll underneath the header, because stick headers are AMAZING! </p>
<p> Another paragraph just to have content to scroll underneath our header, </p>
</div>
.stick-container {
padding: 0 8px;
width: 200px;
height: 200px;
overflow-y: auto;
border: 1px solid #333;
}
.sticky {
position: sticky;
top: 0;
background-color: #EEE;
border: 2px dashed black;
padding: 8px;
}
p {
border: 2px dashed blue;
padding: 8px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.