javascript - js如何控制背景色透明度从0到1？

Question

初始颜色为 rgba(36, 41, 44, 0)，当滚动时透明度慢慢向1变化，滚动到100px时，透明度为1。
该如何实现？

滚动代码如下：

window.onscroll = function() {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    if(scrollTop >= 100){
        怎么写.....       
    } else {
        code in here........    
    }
});

Answer 1

我写了一个头部固定透明度变化的demo，可以参考下。

#header{
    position:fixed;
    width:100%;
    height:50px;
    top:0;
    left:0;
    background:rgba(36,41,44,0);
}

var header=document.getElementById('header');
window.onscroll = function() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var opcaity=(scrollTop/100>1)?1:scrollTop/100;
    header.style.background='rgba(36,41,44,'+opcaity+')';
}

Answer 2

$(window).scroll(function(){

    var scrollTop = $(this).scrollTop(); 
    
    var opacity;
    /* 透明度初始为1，随着滚动逐渐为0 */
    opcaity = (1 - (scrollTop / 100)<0) ? 0 : 1 - (scrollTop / 100);
    /* 透明度初始为0，随着滚动逐渐为1 */
    opcaity = (scrollTop / 100 > 1) ? 1 : scrollTop / 100;
    
    $(element).css('opacity', opcaity);

});

Answer 3

可以把利用scroll事件控制opacity的值，利用scrollTop的值被100等分

opacity : (scrollTop / 100) * 1//控制他的透明度

Answer 4

获取页面的高度 scrollHeight 窗口的高度 clientHeight .设置页面的变化步数，比如说我从0-1 分成一百个步骤 则每次滚动变换的高度为 (scrollHeight - clientHeight)/steps ,stepsOpacity = 1/steps, 每次滚动这么多距离的时候 opacity += stepsOpacity; 其他的就自己想了