javascript - 位置 :sticky : Adding style when the element detaches from normal flow

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);
}

我知道有一些很好的插件，但如果不绕过(相当新的) native 功能 position:sticky，它们似乎都无法实现它。相反，他们以一种老式的方式(滚动事件和 position:fixed; top:0)来实现。

那么，是否可以使用 position:sticky 来做到这一点，而不使用 scroll 事件，这会降低页面的流动性(我不是针对 javascript，但滚动事件太慢)？

Answer 1

不幸的是，据我所知，没有针对“粘性”状态的伪类。

查看帖子:Targeting position:sticky elements that are currently in a 'stuck' state

另一种方法是在到达需要粘贴的元素时使用 jQuery 添加或删除类/css 样式。