定位位置：当前处于“卡滞”状态的粘性元素

Question

位置：sticky现在可在某些移动浏览器上使用，因此您可以使菜单栏随页面一起滚动，但是每当用户滚动通过时，便会停留在视口顶部。

但是，如果您想在粘滞菜单栏当前处于“粘滞状态”时稍微重新设置样式，该怎么办？例如，您可能希望栏在页面上滚动时始终带有圆角，但是一旦它粘到视口的顶部，您就希望摆脱顶部的圆角，并在其下方添加一个小阴影它。

是否有任何类型的伪选择器（例如::stuck）针对具有position: sticky 和
当前粘附的元素？还是浏览器供应商正在准备类似这样的东西？如果没有，我将在哪里提出要求？

注意 javascript解决方案对此不利，因为在移动设备上scroll，用户释放手指时通常只会得到一个事件，因此JS无法知道滚动阈值通过的确切时间。

Answer 1

当前没有为当前“卡住”的元素提议选择器。所述Postioned布局模块]，其中position: sticky被定义不任一提及任何此类选择器。

可以将CSS的功能请求发布到www样式的邮件列表中。我相信:stuck伪类比::stuck伪元素更有意义，因为您希望在元素处于该状态时以它们本身为目标。事实上，:stuck伪类讨论前一段时间 ; 人们发现，主要的复杂性是困扰所有试图根据呈现或计算的样式进行匹配的拟议选择器：循环依赖。

对于:stuck伪类，使用以下CSS会发生最简单的循环：

:stuck { position: static; /* Or anything other than sticky/fixed */ }
:not(:stuck) { position: sticky; /* Or fixed */ }

而且可能还有更多难以解决的极端情况。

尽管人们普遍认为，基于某些布局状态进行匹配的选择器将是 不错的选择
，但不幸的是，由于存在一些主要限制，因此这些实现并不容易。我不会很快就为这个问题提供纯CSS解决方案。