定位位置：当前处于“卡住”状态的粘性元素 [英] Targeting position:sticky elements that are currently in a 'stuck' state

问题描述

位置：粘性适用于某些移动设备浏览器，所以你可以使一个菜单栏滚动与页面，但然后坚持到视口的顶部，当用户滚动它。

position: sticky works on some mobile browsers now, so you can make a menu bar scroll with the page but then stick to the top of the viewport whenever the user scrolls past it.

但是如果你想重新修改你的粘性菜单栏略有什么时候，它目前坚持？例如，您可能希望栏在每次滚动页面时都具有圆角，但是一旦它粘在视口的顶部，您就要除去顶部圆角，并在下面添加一些阴影

But what if you want to restyle your sticky menu bar slightly whenever it's currently 'sticking'? eg, you might want the bar to have rounded corners whenever it's scrolling with the page, but then as soon as it sticks to the top of the viewport, you want to get rid of the top rounded corners, and add a little drop shadow underneath it.

有任何类型的伪选择器（例如 :: stuck ）到目标元素 position：sticky 和目前正在粘贴？或者浏览器供应商有这样的东西吗？如果没有，我会在哪里要求？

Is there any kind of pseudoselector (eg ::stuck) to target elements that have position: sticky and are currently sticking? Or do browser vendors have anything like this in the pipeline? If not, where would I request it?

注意。 javascript解决方案不是很好，因为在移动你通常只会得到一个滚动事件，当用户释放他们的手指，所以JS不能知道确切的时刻滚动阈值。

NB. javascript solutions are not good for this because on mobile you usually only get a single scroll event when the user releases their finger, so JS can't know the exact moment that the scroll threshold was passed.

推荐答案

目前没有针对当前卡住的元素提出选择器。 定位布局模块，其中定义 position：sticky 没有提及任何这样的选择器。

There is currently no selector that is being proposed for elements that are currently 'stuck'. The Postioned Layout module where position: sticky is defined does not mention any such selector either.

CSS的功能请求可以发布到 www风格的邮件列表。我相信一个：stuck 伪类比一个 :: stuck 伪元素更有意义，因为你寻找目标元素本身，而他们在那个状态。事实上，讨论了：stuck 伪类一段时间前;主要的复杂性，它被发现，困扰任何建议选择器尝试匹配基于渲染或计算风格：循环依赖。

Feature requests for CSS can be posted to the www-style mailing list. I believe a :stuck pseudo-class makes more sense than a ::stuck pseudo-element, since you're looking to target the elements themselves while they are in that state. In fact, a :stuck pseudo-class was discussed some time ago; the main complication, it was found, is one that plagues just about any proposed selector that attempts to match based on a rendered or computed style: circular dependencies.

在这种情况下：stuck 伪类，最简单的循环情况将发生在以下CSS中：

In the case of a :stuck pseudo-class, the simplest case of circularity would occur with the following CSS:

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

还有更多的边缘情况， 。

And there could be many more edge cases that would be difficult to address.

尽管人们普遍同意具有基于某些布局状态匹配的选择器将是 nice ，但是不幸的是存在主要的限制， - 实施。我不会在短期内对这个问题的纯CSS解决方案持有我的呼吸。

While it's generally agreed upon that having selectors that match based on certain layout states would be nice, unfortunately major limitations exist that make these non-trivial to implement. I wouldn't hold my breath for a pure CSS solution to this problem anytime soon.

这篇关于定位位置：当前处于“卡住”状态的粘性元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！