如何在用户开始滚动并且元素变为“sticky”时，仅更改“position: sticky”元素的外观？

Question

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

我正在尝试弄清楚如何使所讨论的粘性元素在用户向下滚动并且这个元素的“粘性”变得明显时立即改变外观？也许当它到达父容器的顶部时，也许只是当用户滚过某个点时 - 可能有几种编码方式，但我似乎找不到任何方法。

具体而言，我想做的是 - 当他们开始滚动并且粘性元素跟随时添加1px的底部边框。在此之前，边框是不可见/不存在的。

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

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

谢谢！

- king_anton

---

请注意，他们滚动的页面长度将不断变化 - 因此，设置它在滚动一定百分比时更改可能效果不佳，因为页面长度将动态更改。 - king_anton

Answer 1

简单来说，将您的样式放在一个类中，在HTML中切换此类即可。

//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

- Mohamed EL-Gendy

---

干净利落，运行得很好。稍作修改，使用GetElementByID代替querySelector。有一个问题。我将滚动位置设置为215，因为这是使其在正确时刻出现的完美位置。这个位置会根据用户的计算机屏幕大小等因素而变化吗？也就是说，对我来说215可能会在别人那里变成310，在另一个人那里变成155吗？还是说这是一个不考虑屏幕大小的一致度量？如果有Chrome扩展程序，那么这是否重要？谢谢！ - king_anton

还有一个问题：有没有办法在两者之间进行动画/淡出过渡？目前这样做有点突兀。微妙的过渡期会使它变得非常流畅。谢谢！ - king_anton

更新：我将这个代码添加到包含边框阴影的类中，它可以延迟应用该类更改。因此，它可以很好地淡入而不是突然出现。非常酷！感谢Mohamed的帮助。-- 过渡：所有 .3s 缓动。 - king_anton

它只是 215px，不会因为不同的屏幕尺寸而改变，但是其他HTML元素可以根据响应式设计改变大小，例如 img，所以该类仍然在 215px 之后添加，但您可能会在页面的不同位置看到它。 - Mohamed EL-Gendy

transition: ease all .3s 在这种情况下是一个非常好的解决方案。如果这个答案完美地解决了问题，请将其标记为答案以指引他人。 - Mohamed EL-Gendy

Answer 2

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

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

- king_anton