问题描述
您好，我是手工艺新手，我想知道是否有可能更改样式或在滚动上添加类。例如，我有固定的导航，当用户处于 1000 像素滚动高度时，我想更改颜色。我该怎么做？
解决方法
这与 Craft 关系不大，因为这只是向前端添加一些 JavaScript 代码的问题。有几种方法可以实现这一点。在滚动上执行某些操作的经典方法是使用 scroll event listener。在事件侦听器中，您可以检查滚动位置（请参阅 window.scrollY）并执行您想要的任何逻辑。缺点是滚动事件侦听器对性能不利，因为理论上它们可以在滚动时连续执行多次。由于这个原因，一些浏览器会限制滚动事件，因此事件侦听器可能会延迟执行。您应该尽量避免使用滚动侦听器，或者至少避免使用 use passive listeners to improve performance。
headroom.js 是一个专门用于根据滚动位置和方向修改粘性导航的库，但由于它使用滚动事件侦听器，因此也存在同样的问题。
如果可以，看看您的问题是否无法使用 Intersection Observers 解决，因为它们的性能要好得多。