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

问题描述

问 题

初始颜色为 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........    
    }
});

解决方案

我写了一个头部固定透明度变化的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+')';
}

这篇关于javascript - js如何控制背景色透明度从0到1？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！