javascript滚动到大于一定距离显示隐藏 

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        max-width: 640px;
        margin: 0 auto;
    }

    .box {
        display: block;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 20px;
        background-color: #DC7E2D;
        margin-top: 30px;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9
    }
    </style>
</head>

<body>
    <div style="height:300px;background-color: #3045A4"></div>
    <div style="height:100px;background-color: #3E41D6"></div>
    <div style="height:300px;background-color: #645FB1"></div>
    <div style="height:200px;background-color: #F18733"></div>
    <a href="javascript:;" class="box" id="btn">按钮</a>
    
    <script>
    window.onscroll = function() {
        var btn = document.getElementById('btn');
        var scrollTop = document.body.scrollTop || (document.documentElement && document.documentElement.scrollTop);
        if (scrollTop >=300) {
            btn.style.display = 'none';
        } else{
            btn.style.display = 'block';
        }
    }
    </script>
</body>

</html>

效果图：

 

posted @ 2018-04-02 17:31  前端HL  阅读(537)  评论(0)  编辑  收藏  举报