滚动距离顶部一定距离悬浮显示隐藏 

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0
    }
    
    .box1 {
        width: 600px;
        height: 1800px;
        background-color: #ddd;
        margin: 0 auto;
    }
    
    .nav {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        line-height: 50px;
        background: #000;
        display: none;
        color: #fff; font-size: 24px; text-align: center;
    }
    
    .h250 {
        height: 250px;
        background: #D99797
    }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(window).scroll(function() {
        var scroHei = $(window).scrollTop();
        if (scroHei > 250) {
            $('.J_nav').fadeIn();
        } else {
            $('.J_nav').fadeOut();
        }
    });
    </script>
</head>

<body>
    <div class="box1">
        <div class="nav J_nav">悬浮显示</div>
        <div class="h250">高为250</div>
    </div>
</body>

</html>

　　1.显示图：

2.滚动之后显示：

 

posted @ 2017-04-01 16:56  前端HL  阅读(1612)  评论(0)  编辑  收藏  举报