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以便在滚动时更改元素时，有更平滑的视觉提示，表明某些事情正在发生变化。