xxxxxxxxxx1
<!-- Tabs navs -->2
<div style="height: 200vh; margin-top: 100px">3
<ul class="nav nav-tabs mb-3" id="ex1" role="tablist">4
<li class="nav-item" role="presentation">5
<a6
class="nav-link active"7
id="ex1-tab-1"8
data-toggle="tab"9
href="#ex1-tabs-1"10
role="tab"11
aria-controls="ex1-tabs-1"12
aria-selected="true"13
>Tab 1</a14
>15
</li>16
<li class="nav-item" role="presentation">17
<a18
class="nav-link"19
id="ex1-tab-2"20
data-toggle="tab"21
href="#ex1-tabs-2"22
role="tab"23
aria-controls="ex1-tabs-2"24
aria-selected="false"25
>Tab 2</a26
>27
</li>28
<li class="nav-item" role="presentation">29
<a30
class="nav-link"31
id="ex1-tab-3"32
data-toggle="tab"33
href="#ex1-tabs-3"34
role="tab"35
aria-controls="ex1-tabs-3"36
aria-selected="false"37
>Tab 3</a38
>39
</li>40
</ul>41
<!-- Tabs navs -->42
43
<!-- Tabs content -->44
<div class="tab-content" id="ex1-content">45
<div46
class="tab-pane fade show active"47
id="ex1-tabs-1"48
role="tabpanel"49
aria-labelledby="ex1-tab-1"50
>51
<h4 class="shadow p-2 bg-light border sticky">sticky sticky</h4>52
</div>53
<div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">54
<h4 class="shadow p-2 bg-light border sticky">sticky sticky</h4>55
</div>56
<div class="tab-pane fade" id="ex1-tabs-3" role="tabpanel" aria-labelledby="ex1-tab-3">57
Tab 3 content58
</div>59
</div>60
<!-- Tabs content -->61
</div>1
1
xxxxxxxxxx1
var tabElements = document.querySelectorAll('a[data-toggle="tab"]');2
var stickyElements = document.querySelectorAll('.sticky');3
4
tabElements.forEach((tab) => {5
tab.addEventListener('show.bs.tab', () => {6
const scrollY = window.scrollY;7
window.scroll(window.scrollX, scrollY + 1);8
window.scroll(window.scrollX, scrollY);9
});10
}); Console errors: 0