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

Question

我有一个 id 为“#box”的标题 div，我已将其固定在顶部作为我的页面，因此当您向下滚动页面时它会保留在那里。我目前拥有的是当用户向下滚动时，标题 div 的背景颜色使用 { window.pageYOffset > 50 } 从不透明状态变为 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 属性“过渡：背景 1s;”到标题。

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