<div class="stick-container">
<div class="sticky left">
Sticky Left
</div>
<div class="text"> Some text to allow the sticky header to stick! </div>
<div class="text"> This paragraph will continue to scroll. </div>
<div class="text"> Another paragraph just to have content to scroll. </div>
<div class="text"> So many paragraphs to make this scrollable</div>
<div class="text"> At least one more to make sure we can see</div>
<div class="sticky right">
Sticky Right
</div>
</div>
.stick-container {
display: flex;
padding: 8px 0;
width: 360px;
height: 200px;
overflow-x: auto;
border: 1px solid #333;
}
.sticky {
position: sticky;
background-color: #EEE;
border: 2px dashed black;
padding: 8px;
}
.left {
margin: 0 8px 0 0;
left: 0;
}
.right {
margin: 0 0 0 8px;
right: 0;
}
.text {
border: 2px dashed blue;
padding: 8px;
margin: 0 8px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.