position:sticky:在元素脱离正常流时添加样式

position:sticky : Adding style when the element detaches from normal flow

本文关键字：常流时 样式 添加 sticky 元素 position      更新时间：2023-09-26

让我们看一个简单的例子:

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

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

参见post: Targeting position:当前处于'stuck'国家

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

我在这里找到了答案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类。

您的最佳解决方案可能是依赖于JavaScript滚动事件。CSS有(有限的)对快照点的支持，但这是目前最接近滚动事件的支持。

如果你唯一关心的是JS解决方案的流动性，我可能会建议尝试应用CSS过渡到#mynav，这样当元素在滚动上改变时，有一个更平滑的视觉提示，一些东西正在改变。

相关文章：