定位位置:当前处于“卡住"状态的粘性元素 [英] 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 解决方案对此并不好，因为在移动设备上，当用户松开手指时，您通常只会收到一个 scroll 事件，因此 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 的 Postioned Layout 模块 也没有提及任何此类选择器.

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-style 邮件列表.我相信 :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.

虽然人们普遍认为拥有基于某些布局状态匹配的选择器会很好，但不幸的是，存在主要限制使得这些限制难以实现.我不会在短时间内为这个问题的纯 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屋！