Open
Description
https://jsfiddle.net/ebkafjtp/18/
<div class="container">
<div class="sticky"></div>
<div class="sticky"></div>
<div class="sticky"></div>
<div class="sticky"></div>
<div class="sticky"></div>
</div>.sticky {
container-type: scroll-state;
position: sticky;
top: 0;
height: 30vh;
margin-block: 2rem;
background: gray;
}
.sticky:nth-child(even) {
background: darkgray;
}
@container scroll-state(stuck: block-start) {
*::before {
content: 'block-start';
}
}
@container scroll-state(stuck: none) {
*::before {
content: 'none';
}
}When scrolling the viewport to the end, any .sticky whose getBoundingClientRect().bottom is negative will still have their ::before { content: 'block-start'; } style that defined in the <block-contents> of @container.