jq 固定导航栏

最新推荐文章于 2021-03-11 13:47:27 发布

weixin_33716154

最新推荐文章于 2021-03-11 13:47:27 发布

阅读量389

点赞数

原文链接：http://www.cnblogs.com/lujieting/p/10110776.html

版权

<style>
        * {
            margin: 0;
            padding: 0
        }

        img {
            vertical-align: top;
        }

        .main {
            margin: 10px auto 0;
            width: 1000px;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $(window).scroll(function () {
                //判断卷去的高度超过topPart的高度
                // 1：让navBar有固定定位
                // 2: 让mainPart有个marginTop
                if ($(window).scrollTop() >= $(".top").height()) {
                   $(".nav").addClass("fixed");
                   $(".main").css("marginTop",$(".nav").height()+10);
                }else {
                    $(".nav").removeClass("fixed");
                    $(".main").css("marginTop",10);
                }
            });
        });
    </script>
</head>
<body>
<div class="top" id="topPart">
    <img src="imgs/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
    <img src="imgs/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
    <img src="imgs/main.png" alt=""/>
</div>

转载于:https://www.cnblogs.com/lujieting/p/10110776.html

weixin_33716154

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq 固定导航栏

<style> * { margin: 0; padding: 0 } img { vertical-align: top; } .main { margin: 10px auto 0; width: 100...
复制链接

扫一扫