位置：粘性：添加样式在元素的正常流动分离

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

不幸的是，据我所知，目前还没有一个以“粘性”状态为目标的伪类。

参见交：Targeting position:sticky elements that are currently in a 'stuck' state

另一种方法是使用jQuery添加或当它到达需要被stickied元素删除类/ CSS样式。

编辑：

在另一方面， '位置：粘;'由于低浏览器支持，不推荐使用。见http://caniuse.com/#search=sticky。在这种情况下，更好地坚持使用jQuery :-)

Answer 2

您最好的解决方案可能是依靠JavaScript滚动事件。 CSS对捕捉点提供了（有限的）支持，但这对于任何类型的滚动事件支持来说都是最接近的。

如果有JS的解决方案唯一担心的是流动性，我可能会建议试图CSS转换适用于#mynav这样，当元素上滚动改变，有一个流畅的视觉线索的东西正在发生变化。