js 背景从无到黑的渐变字从白到黑的渐变

佚名 6年前 (2019-04-25) 随笔 1362人围观抢沙发百度已收录

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>css透明度的变化</title>
         <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <style type="text/css">
            #header {
                position: fixed;
                width: 100%;
                height: 50px;
                top: 0;
                left: 0;
                background: rgba(36, 41, 44,0);//背景的初始值
                color: rgba(230,23,71);//文字的初始值
            }
        </style>
    </head>

    <body>
        <div>
            <div id="header">头部</div>
            <ul>
                <li>12345678910</li>
                <li>12345678910</li>
                //想看效果的话多赋值几个出来
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        var header = document.getElementById('header');
        window.onscroll = function() {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;//获取页面滚动的距离
            console.log(scrollTop)
            var opcaity = (scrollTop / 100 > 1) ? 1 : scrollTop / 100;//透明度的渐变取值
            header.style.background = 'rgba(36,41,44,' + opcaity + ')';
                 if(opcaity>0.2){
                             header.style.color= 'rgba(255,255,255,' + opcaity + ')';
                        }else{
                              header.style.color='rgba(230,23,71)' //往回滑的时候再给一个默认值
                        }
        }
    </script>

</html>