页面头部根据向下滚动距离变透明

页面头部根据向下滚动距离变透明

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            position: relative;
        }
        
        .aa {
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: rgb(0, 255, 255);
        }
        
        .bb {
            width: 100%;
            height: 500px;
            background-color: pink;
        }
        
        .cc {
            width: 100%;
            height: 500px;
            background-color: skyblue;
        }
        
        .dd {
            width: 100%;
            height: 500px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="aa">111</div>
    <div class="bb">222</div>
    <div class="cc">333</div>
    <div class="dd">444</div>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".btn1").click(function() {
                $("div").scrollTop(100);
            });
            $(".btn2").click(function() {
                alert($("div").scrollTop() + " px");
            });
        });
    </script>
    <script>
        $(function() {
            // 滚动元素时触发函数
            $(document).scroll(function() {
                // 滚动条距离顶部位置 px
                var aa = $(window).scrollTop()
                    // 距离顶部为 500px 时背景全透明
                var top_px = 500
                if (aa <= top_px) {
                    var bb = aa / top_px
                    var cc = 1 - bb
                    console.log("滚动条距离顶部", aa, "透明度", bb);
                    $(".aa").css({
                        "background-color": "rgb(000,255,255)"
                    })
                    $(".aa").css({
                        opacity: cc
                    })
                } else {
                    $(".aa").css({
                        opacity: 0
                    })
                }

            })
        })
    </script>
</body>

</html>

 

posted @ 2020-09-25 16:28  IT1998  阅读(312)  评论(0)    收藏  举报