I am using a position sticky within a CSS flexbox. However, on on scroll I would like the scrollable items to be hidden behind the sticky header part and don’t want them to be see through. Is there any option to fix this, e.g. having another fixed element which is not taking any of the initial scroll space which is behind the sticky and in front of the scrollable elements?
See here: Row inbetween Header and Section in scroll area should be hidden
html, body {
overflow: hidden;
}
.view {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 40px;
background-color: #EEE;
overflow-y: scroll;
height: 400px;
padding: 10px;
}
.stick-header {
position: sticky;
top: 0px;
background-color: #CCC;
border-radius: 4px;
height: 20px;
padding: 10px;
}
.stick-section {
position: sticky;
top: 60px;
background-color: #333;
color: white;
border-radius: 10px;
height: 20px;
padding: 10px;
}
.row {
background-color: green;
padding: 10px;
}<div class="view">
<div class="stick-header">Header</div>
<div class="stick-section">Section</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="stick-section">Section</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="stick-section">Section</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="stick-section">Section</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="stick-section">Section</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>