码迷,mamicode.com
首页 > Web开发 > 详细

jQuery学习 (固定导航栏效果)

时间:2020-04-22 16:20:53      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:text   margin   into   utf-8   htm   images   har   top   charset   

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>固定导航栏</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            width: 1000px;
            margin: 0 auto;
        }
        /*.top {
            height: 171px;
        }
        .nav {
            height: 86px;
        }*/
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $(window).scroll(function () {
                //获取页面卷曲出去的高度和.top的div的高度对比
                if($(document).scrollTop()>$(".top").height()){
                    $(".nav").css({"position":"fixed","top":0});
                    $(".main").css("marginTop",$(".nav").height());
                }else{
                    $(".nav").css("position","static");
                    $(".main").css("marginTop",0);
                }
            });
        });

    </script>
</head>

<body>
<div class="top">
    <img src="images/top.png" />
</div>
<div class="nav">
    <img src="images/nav.png" />
</div>
<div class="main">
    <img src="images/main.png" />
</div>
</body>

</html>

 

jQuery学习 (固定导航栏效果)

标签:text   margin   into   utf-8   htm   images   har   top   charset   

原文地址:https://www.cnblogs.com/gaoSJ/p/12752541.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!