javascript - 当用户向下滚动窗口 JAVASCRIPT 时，将 div 的颜色淡化为不透明

Question

我有一个 id 为“#box”的 header div，我已将其固定在顶部作为我的页面，因此当您向下滚动页面时它会保留在那里。我目前拥有的是当用户向下滚动时，标题 div 的背景颜色从它的不透明状态变为 50% 透明度，使用 { window.pageYOffset > 50 } 如果标题回到顶部，则返回到它的原始透明度。所以它基本上从一种固态变为另一种固态，我想找到一种方法让它从开始的 50% 透明度逐渐变为不透明状态，并使用 Javascript 实现淡入淡出效果。下面是我的原始场景的原始代码，下面是我尝试创建淡入淡出效果但完全卡住了。它根本不工作；没有任何反应。使用 Jquery 会更容易吗？

原始场景:

window.onscroll = 滚动;

function scroll() {
    var header=document.getElementById("header1");

    console.log(window.pageYOffset);
    if(window.pageYOffset > 50){
    console.log("Change Opacity now");
      document.getElementById("header1").style.backgroundColor="rgba(38, 28, 63, 1.0)";
    }
    else{
      document.getElementById("header1").style.backgroundColor="rgba(38, 28, 63, 0.5)";

    }

}

淡入尝试:

window.onscroll = 滚动;

function scroll() {
    var header=document.getElementById("box");

    console.log(window.pageYOffset);
    if(window.pageYOffset > 0){
        var color = [38, 28, 63].join(',') + ',', 
         transparency = 1,
         element = this, 
         timeout = setInterval(function(){
             if(transparency < 0){ 
                element.style.backgroundColor = 'rgba(' + color + (transparency -= 0.015) + ')';
        } else {
            clearInterval(timeout);
        }
    }, 40);

});

    }

Answer 1

• 如果它确实运行并且颜色发生变化但没有过渡，实现过渡的一种简单方法是添加 css attrib 'transition: background 1s;'到页眉。

如果不是这样，您能否详细说明是什么不起作用？我的意思是，函数没有被调用吗？等等……