Inspect the working example
The scroller has 120px height and overflow:auto. Its heading is sticky at top 0; the remaining content provides 300px of local scrollable space.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Start | scrollTop 0 | Heading at scroller top |
| Local scroll | scrollTop 80 | Heading still at scroller top |
| Outer document | Inspect root scroll position | Local scroll does not require outer document movement |
Follow the browser mechanism
Sticky positioning uses the nearest relevant scrollport and remains constrained by its containing block. This is not fixed viewport positioning. A heading taller than expected also affects available room, so the fixture uses minimum height and allows text growth.
A static heading scrolls away
The alternative keeps the scrollport but removes sticky positioning.
<style>body{margin:8px}</style>
<style>.scroller{height:120px;overflow:auto}.heading{margin:0;background:white}.content{height:300px}</style><section class="scroller"><h2 class="heading">Workshop log</h2><section class="content"><p>Local rows continue here.</p></section></section>At scrollTop 80 the static heading moves 80px above its original position rather than remaining at the local top.
Try the repair
Does this sticky heading prove it will remain pinned after leaving the containing section?
Show the worked answer
No. The containing-block boundary limits sticky positioning. Test the actual local scrollport and full containing section.
- Measure heading top relative to the scroller before and after scrolling.
- Provide a local focus and scroll route.