如何在 Craft 中更改样式或在滚动条上添加 class

How to change style or add class on scroll in Craft

您好,我是工艺新手,我想知道是否可以更改样式或在滚动条上添加 class。例如,我有固定的导航,我想在用户滚动高度为 1000 像素时更改颜色。我该怎么做?

这与 Craft 没有什么关系,因为它只是向您的前端添加一些 JavaScript 代码的问题。有几种方法可以实现这一点。在滚动上执行某些操作的经典方法是使用 scroll event listener. Inside the event listener, you can check the scroll position (see window.scrollY) and perform whatever logic you want. The downside is that scroll event listeners are bad for performance, since in theory they can execute many times in a row while scrolling. Some browsers throttle scroll events for this reason, so the event listener may be executed with some delay. You should try to avoid using scroll listeners where possible, or at least use passive listeners to improve performance.

headroom.js 是一个专门用于根据滚动位置和方向修改粘性导航的库,尽管它由于使用滚动事件侦听器而遇到同样的问题。

如果可以的话,看看你的问题是否不能用Intersection Observers解决,因为它们的性能要好得多。