Use container queries to style descendants of containers based on their scroll state. The query container is either a scroll container, or an element affected by the scroll position of a scroll container. The following states can be queried: - Whether a sticky positioned container is stuck to one of the edges of the scroll box (stuck) - Whether a scroll snap aligned container is currently snapped horizontally or vertically (snapped) - Whether a scroll container can be scrolled in a queried direction (scrollable) A new container-type:scroll-state is introduced to allow such containers to be queried. For instance: #sticky { position: sticky; container-type: scroll-state; } @container scroll-state(stuck: top) { #sticky-child { font-size: 75% } }
See explainer
Samples: https://codepen.io/argyleink/pen/JjqVzxq https://codepen.io/argyleink/pen/rNgbbOP https://codepen.io/argyleink/pen/wvbZZWP https://codepen.io/argyleink/pen/zYbEdGm https://codepen.io/argyleink/pen/vYPzdGp https://codepen.io/argyleink/pen/PoMJvXN
Explainers: https://drafts.csswg.org/css-conditional-5/scroll_state_explainer.html https://drafts.csswg.org/css-conditional-5/scroll_state_explainer.md