jQuery实用案例之固定导航栏

最新推荐文章于 2020-06-26 15:06:45 发布

小龙爷ღ

最新推荐文章于 2020-06-26 15:06:45 发布

阅读量329

点赞数 1

分类专栏： JQuery 文章标签：固定导航栏 jquery实现导航栏固定

本文链接：https://blog.csdn.net/qq_45086879/article/details/100146322

版权

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

效果图：

页面往下拉

案例：获取三个部分的高度，页面高度大于等于导航栏上面的高度时导航栏固定

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

    .top, .nav {
      width: 1423px;
      margin: 0 auto;
    }

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

    img {
      display: block;
      vertical-align: middle;
    }

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

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //思路:给页面设置一个滚动事件,时刻监视页面的scrollTop的值,
    // 如果这个值大于第一部分的高度,就设置第二部分为固定定位.
    // 如果这个值小于第一部分的高度,就设置第二部分的定位还原.

    //计算第一部分的高度.
    var topHeight = $('.top').height();
    //计算第二部分的高度.
    var navHeight = $('.nav').height();

    //给页面设置一个滚动事件.
    $(window).scroll(function () {
      //1.获取页面滚出去的距离(被卷曲出去的距离);
      var scrollTopValue =  $(window).scrollTop();
      //2.判断,看scrollTopValue的值是不是大于第一部分的高度.
      if(scrollTopValue >= topHeight){
        //让第二部分固定定位.
        $('.nav').css({
          position:'fixed',
          top:0,
          left:48
        });
        //设置第三部分的margin-top的值为第二部分的高度.
        $('.main').css({
          marginTop:navHeight+10
        });
      }else {
        //让第二部分定位还原.
        $('.nav').css({
          position:'static',
          top:0,
          left:0
        });
        //设置第三部分的margin-top的值为原来的值.
        $('.main').css({
          marginTop:10
        });
      }
    });



  });
</script>
</body>
</html>

小龙爷ღ

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery实用案例之固定导航栏

效果图：页面往下拉案例：获取三个部分的高度，页面高度大于等于导航栏上面的高度时导航栏固定<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>固定导航栏</title> <style type="tex...
复制链接

扫一扫