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`

Onscroll事件无效

3 个答案: