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,但滚动事件太慢)？

Answer 1

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

请参阅帖子：定位位置：当前处于“卡住”状态的粘性元素

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