Question

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

原始场景：

window.onscroll = scroll;

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 = scroll;

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;＆＃39;到标题。

如果不是那样的话，请你详细说明什么不起作用？我的意思是，功能是不是被称为？等...

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

1 个答案: