css – 目标位置：当前处于“卡住”状态的粘性元素

现在,position: sticky可以在某些移动浏览器上运行,因此您可以使菜单栏滚动页面,但随后用户滚动浏览器时,将会粘贴到视口顶部.

但是,如果您想要轻轻地修复粘性菜单栏,那么当它正在“粘贴”时呢？例如,您可能希望该栏在滚动页面时具有圆角,但是当它粘贴到视口顶部时,您需要摆脱顶部的圆角,并在下面添加一个小阴影它.

目标元素是否有任何类型的伪选择器(例如::卡住)：具有位置：粘性并且正在粘贴？或者浏览器厂商有没有这样的事情呢？如果没有,我在哪里请求？

NB. javascript解决方案对此不利,因为在移动设备上,当用户释放手指时,通常只能获得一个滚动事件,因此JS无法知道滚动阈值传递的确切时刻.

解决方法

目前没有为当前被卡住的元素提出选择器. Postioned Layout module位置：粘性被定义也没有提到任何这样的选择器.

CSS的功能请求可以发布到www-style mailing list.我相信：卡通伪类比一个:: stuck伪元素更有意义,因为你正在寻找在它们处于该状态时自己定位元素.其实一个：卡通的伪类被讨论了some time ago;发现主要的复杂因素是遇到任何试图根据呈现或计算风格进行匹配的选择器,即循环依赖关系.

在以下情况下：卡住伪类,最简单的圆形情况将发生在以下CSS中：

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

而且可能会有更多的边缘案件难以解决.

虽然普遍同意让选择器基于某些布局状态匹配的选择器会很好,但不幸的是,存在使这些不平凡实现的主要限制.我不会很快就呼吸一个纯粹的CSS解决方案.

原文地址：https://www.jb51.cc/css/217117.html