javascript - 事件监听器只工作一次

Question

当滚动值 >= 500 时，我有一个更改 CSS 的代码：

 var appearScroll = function(){
            let fline = document.getElementById("skills__listone");
            var skills = document.getElementById("skills");
            var baselocation = 0;
            fline.style.opacity = 0;
            var distance = window.pageYOffset;
            window.addEventListener("click", function(){
                if ( distance >= 600 ){
                    fline.style.opacity = 1;
                }
            })
            
            
    
        };
        appearScroll();

这仅适用于一次，例如当滚动值为 200 并且我单击鼠标时，没有任何反应（没关系，因为距离 >= 600），但是当滚动值（例如 700）时，没有任何反应，因为单击功能已经在运行。该功能必须观察距离值并取决于 IT 得出结果

标签： javascripthtmlcsswebdom

Answer 1

var distance = window.pageYOffset;此行应位于单击事件函数内，以获取window.pageYOffset每次单击时的当前值。

像这样：

window.addEventListener("click", function(){
   var distance = window.pageYOffset; // <-- here
   if ( distance >= 600 ){
       fline.style.opacity = 1;
   }
})