仅当用户开始滚动并且其粘性变得明显时，如何更改“位置：粘性”元素的外观？

Question

我有一些非常简单的 CSS 代码使一个特定的 div 容器“粘”，当用户向下滚动时，该 div 元素按预期保持锁定在屏幕顶部。

我试图弄清楚如何做到这一点，以便当用户向下滚动并且该元素的“粘性”变得清晰时，有问题的粘性元素会改变外观？ 也许当它到达父容器的顶部时，也许只是当用户滚动到某个点时——可能有几种方法可以对此进行编码，但我似乎无法弄清楚。

具体来说，我想要做的是——在它们开始滚动时添加一个 1px 的底部边框，并且紧随其后的元素。 在那之前，让边界不可见/不存在。

另请注意，我阅读边框会导致粘性元素出现奇怪的问题，并且阴影是解决此问题的方法，因此我目前正在为“边框”执行此操作：

box-shadow: inset 0 0px 0 #000000, inset 0 -1px 0 #000000;

谢谢！

Answer 1

只需将您的风格放入 class 并在 HTML 中切换此 class

//Simply with jQuery
$(window).scroll(function () {
   if ($(this).scrollTop() > 150) {
      $('.element').addClass('your_class_name');
   } else {
      $('.element').removeClass('your_class_name');
   }
});

//With JavaScript
window.onscroll = function() {
if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
    document.querySelector(".element").classList.add("your_class_name");
  } else {
    document.querySelector(".element").classList.remove("your_class_name");
  }
};

如果用户滚动超过150px像素，这将添加class

Answer 2

最终为此使用了 IntersectionObserver。 基于滚动的方法的缺点？ 也许在某些情况下？ 如果元素的大小根据屏幕大小、正在使用的浏览器等动态/响应地调整？ 这可能会导致在错误的时刻进行更改，这看起来非常糟糕。 IntersectionObserver 似乎一致地根据粘性元素和父 div 的相对 position 进行更改——因此它应该在所有用例中保持一致。

https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/