問題描述

位置:粘性適用于某些移動設備瀏覽器，因此您可以讓菜單欄隨頁面一起滾動，但只要用戶滾動經過它，它就會停留在視口的頂部.

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.

這篇關于定位位置:當前處于“卡住"狀態的粘性元素的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！