jQuery小案例之固定导航栏

时间 2021-01-07

先来看一下效果：

代码部分：
html
为展示效果方便，用三张图片代替，愿谅解。

<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>

css:

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            width: 1000px;
            margin: 0 auto;
        }
    </style>

jQuery:

<script src="jquery-1.12.2.js"></script>
    <script>
       $(function(){
          //window对象触发滚动事件
          $(window).scroll(function(){
              
             if($(document).scrollTop() >= $(".top").height()){
              // console.log("超过了");
              $(".nav").css({"position":"fixed","top":0});
              $(".main").css("marginTop",$(".nav").height());
             }else{
              $(".nav").css("position","static");
              $(".main").css("marginTop",0);
             }
          });
       });
    </script>

总体代码->便于复制粘贴

<!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;
        }
    </style>

    <script src="jquery-1.12.2.js"></script>
    <script>
       $(function(){
          //window对象触发滚动事件
          $(window).scroll(function(){
              
             if($(document).scrollTop() >= $(".top").height()){
              // console.log("超过了");
              $(".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>

总结 1.分析：当滚轮划出距离超过固定栏上面元素的总高度时，让滚动栏固定。当距离小于高度时，让滚动栏恢复正常状态。 2.注意问题：当把固定栏设成fixed时脱标，下面的元素会网上冲，网上移动的距离为固定栏的高度。 3.window对象触发滚动事件。 4.滚动事件：scroll()。 5.获取滚动的距离：上距离：scrollTop() 左距离scrollLeft()。 6.获取元素宽高：width()方法和height()方法。 7.固定栏定位属性为fixed固定，static恢复正常。 8.本人也刚刚入门若上述代码及表述有误，望看到的大佬及时指出并纠正，定虚心求教。