Hide scrollable element under a sticky element - html

Question

I want to hide the second header when it goes under the first header on small resolution when it scroll, I realy don't know how to do it, I tried everything.
.horizontal-scroll-table > .row::-webkit-scrollbar {
display: none;
background-color: red;
width: 500px;
}
table thead th {
background-color: red;
color: white;
padding: 16px 24px;
}
table thead th:last-child {
border-radius: 0 50px 50px 0;
}
table thead th:first-child {
border-radius: 50px 0 0 50px;
position: sticky !important;
left: 0;
z-index: 999;
}
#media (max-width: 991px) {
.horizontal-scroll-table > .row {
overflow-x: scroll;
white-space: nowrap;
overflow-y: hidden;
}
.horizontal-scroll-table > .row > .col-md-12 {
display: inline-block;
float: none;
}
}
<div class="horizontal-scroll-table">
<div class="row" style="text-align: -webkit-center;">
<table>
<thead class="" style="background-color: #111A40;">
<tr>
<th>Sticky header</th>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
</thead>
</table>
</div>
</div>
here it's an example try to scroll on small size

Answer 1

An interesting use case. I would have completely different approach; would this work for you?
header > div {
display: inline-block;
border: 1px solid red;
width: 120px;
}
header {
white-space: nowrap;
}
/* actual solution */
header > div:nth-of-type(1) {
background: lightpink;
position: sticky;
left: 0;
}
<header>
<div>Sticky</div>
<div>Child1</div>
<div>Child2</div>
<div>Child3</div>
<div>Child4</div>
<div>Child5</div>
<div>Child6</div>
<div>Child7</div>
</header>