The issue is the use of overflow inside .app-body. It’s a bit tricky but there should be no overflow property set to any element between the element that has the scroll and the sticky element.
Here is a basic example to illustrate. The scroll is on the viewport and we have a wrapper with overflow:hidden (or even auto) thus the sticky behavior won’t work.
.container {
display:flex;
align-items:flex-start;
border:2px solid green;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}
.wrapper {
overflow:hidden;
border:2px solid red;
}<div class="wrapper">
<div class="container">
<div class="sticky"></div>
<div class="content"></div>
</div>
</div>If we remove the overflow, it will work as expected:
.container {
display:flex;
align-items:flex-start;
border:2px solid green;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}
.wrapper {
border:2px solid red;
}<div class="wrapper">
<div class="container">
<div class="sticky"></div>
<div class="content"></div>
</div>
</div>If we keep the overflow within the wrapper but we move the scroll to the container element it will also work because there is no element with overflow set between the scroll and the sticky element:
.container {
display:flex;
align-items:flex-start;
border:2px solid green;
max-height:200px;
overflow:auto;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}
.wrapper {
overflow:hidden;
border:2px solid red;
}<div class="wrapper">
<div class="container">
<div class="sticky"></div>
<div class="content"></div>
</div>
</div>Related: What are `scrolling boxes`?