javascript - 滚动事件不起作用

Question

这次我的动画有问题。当用户向下滚动时，我希望我的背景标题/菜单变为白色。

标题/菜单是固定的，我使用 z-index 属性将其维护在页面其余部分之上。

我用一些 JS 和 CSS 代码制作了一个 html 测试页面：

您可以在这里在线查看测试：http ://www.lacouleurdurendezvous.fr/test

抱歉，我试着把代码放在这里，但编辑器有点反复无常

Answer 1

您没有使用正确的代码来获取滚动位置。参考一个非常相似的问题的答案：JavaScript get window X/Y position for scroll

var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

这将导致一个 onscroll 事件处理程序，如下所示：

window.onscroll=function() {
    var doc = document.documentElement;
    var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
    document.getElementById('text').className=top>50 ? 'scroll' : '';
}

Answer 2

问题不在于 javascript，问题在于 html 中没有足够的文本来触发滚动条。没有滚动条，没有滚动，因此监听器永远不会触发。

当我多次复制您的 html 文本时，此事件能够触发：

     function () { console.log('working'); }

Answer 3

change `window.scrollTop` to `window.scrollY`