position：sticky：当元素与正常流分离时添加样式

Question

我们来看一个简单的例子：

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

和基本风格：

#mynav {
    position : sticky;
}

我想将以下样式信息应用于我的导航栏仅，当它与正常流分离时，为了在视觉上将其与主要内容分开（在这种情况下带阴影）< / p>

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

我可以使用某种伪类或类似媒体查询的东西吗？ E.g：

#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

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

见帖子：Targeting position:sticky elements that are currently in a 'stuck' state

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

编辑：

另一方面，'position：sticky;'由于浏览器支持较低，因此不建议使用。见http://caniuse.com/#search=sticky。在这种情况下，最好坚持使用jQuery： - ）

Answer 2

您最好的解决方案可能是依赖JavaScript滚动事件。 CSS对快照点有（有限的）支持，但它现在最接近任何类型的滚动事件支持。

如果您对JS解决方案的唯一关注是流动性，我可能会建议尝试将CS​​S转换应用于#mynav，以便在滚动时更改元素时，会有一个更平滑的视觉提示，即某些内容正在发生变化。 / p>