position:sticky: 當元素脫離正常流時添加樣式

Question

讓我們舉一個簡單的例子：

<nav id="#mynav">MY NAVBAR</nav>

和基本風格：

#mynav {
    position : sticky;
}

我想僅在導航欄脫離正常流程時將以下樣式信息應用於我的導航欄，以便從視覺上將其與主要內容分開（在這種情況下帶有陰影）

box-shadow : 0px 10px 15px 0px rgba(0,0,0,0.75);

我可以使用某種偽類或類似媒體查詢的東西嗎？ 例如：

#mynav:some-pseudo-class {
    box-shadow : 0px 10px 15px 0px rgba(0,0,0,0.75);
}

我知道有很好的插件，但如果不繞過（相當新的）本機功能position:sticky ，它們似乎都無法實現它。 相反，他們以一種老式的方式（滾動事件和position:fixed; top:0 ）來實現。

那么，是否可以使用position:sticky而不使用scroll事件來做到這一點，這會降低頁面的流動性（我不反對 javascript，但 scroll 事件太慢了）？

Answer 1

不幸的是，據我所知，沒有針對“粘性”狀態的偽類。

請參閱帖子： 定位位置：當前處於“卡住”狀態的粘性元素

另一種方法是使用 jQuery 在到達需要粘貼的元素時添加或刪除類/css 樣式。

Answer 2

我剛剛在這里找到了答案https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/

從今天開始，您確實需要使用 javascript：

 const el = document.querySelector(".myElement") const observer = new IntersectionObserver( ([e]) => e.target.classList.toggle("is-pinned", e.intersectionRatio < 1), { threshold: [1] } ); observer.observe(el);

 #parent { height: 2000px; }.myElement { position: sticky; top: -1px; } /* styles for when the header is in sticky mode */.myElement.is-pinned { color: red; }

 <div id="parent"> <br /> <br /> <br /> <br /> <div class="myElement">Hello!</div> </div>

top: -1px非常重要，因為IntersectionObserver檢測“您的元素在屏幕上的可見程度”。 e.intersectionRatio對應於el的“可見性”百分比。 因此，如果您使用top: 0px ，則e.intersectionRatio將始終等於1 ，並且永遠不會添加is-pinned類。

Answer 3

您最好的解決方案可能是依靠 JavaScript 滾動事件。 CSS 對捕捉點有（有限的）支持，但這是它現在最接近任何類型的滾動事件支持。

如果您對 JS 解決方案的唯一關注是流動性，我可能建議嘗試將 CSS 轉換應用於#mynav以便在滾動時更改元素時，有更平滑的視覺提示，表明某些事情正在發生變化。