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

最新推荐文章于 2020-10-28 15:27:07 发布

diebaiying3731

最新推荐文章于 2020-10-28 15:27:07 发布

阅读量454

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/huanghuali/p/6656682.html

版权

<!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.滚动之后显示：

转载于:https://www.cnblogs.com/huanghuali/p/6656682.html

diebaiying3731

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
滚动距离顶部一定距离悬浮显示隐藏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { mar...
复制链接

扫一扫