jQuery-固定导航栏

最新推荐文章于 2024-03-26 16:53:23 发布

gxgalaxy

最新推荐文章于 2024-03-26 16:53:23 发布

阅读量214

点赞数 1

分类专栏： JQuery 前端

本文链接：https://blog.csdn.net/gxgalaxy/article/details/103142271

版权

前端同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

JQuery

10 篇文章 0 订阅

订阅专栏

文章目录

思路

			思路：给页面设置一个滚动事件，时刻监视页面的scrollTop的值
     		如果这个值大于第一部分的高度，就设置第二部分为固定定位
			如果这个值小于第一部分的高度，就设置第二部分的定位还原

知识点

      //scrollLeft() 表示获取或者设置元素内容被卷曲出去的宽度.
      //scrollTop() 表示获取或者设置元素内容被卷曲出去的高度

源代码

<!-- //固定位置是不占位置的，所有在固定位置的时候要将它的位置留出来 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</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>
<script src="../jquery-3.4.1.min.js"></script>
<body>
        <div class="top">
                <img src="../../Jquery学习源代码/第三章资料/04-代码/images/top.png"/>
              </div>
              <div class="nav">
                <img src="../../Jquery学习源代码/第三章资料/04-代码/images/nav.png"/>
              </div>
              <div class="main">
                <img src="../../Jquery学习源代码/第三章资料/04-代码/images/main.png"/>
              </div>
</body>
</html>
<script>
    $(function(){
        //思路：给页面设置一个滚动事件，时刻监视页面的scrollTop的值
        //如果这个值大于第一部分的高度，就设置第二部分为固定定位
        //如果这个值小于第一部分的高度，就设置第二部分的定位还原

        //计算第一部分的高度
            var topHeight = $(' .top').height();
         //计算第二部分的高度
           var navHeight = $(' .nav').height();
        //给页面设置一个滚动事件
        $(window).scroll(function(){
            //获取页面滚出去的距离（被卷曲出去的距离）
            var scrollTopValue = $(window).scrollTop();
            //判断，看scrollTopValue的高度是不是大于第一部分的高度
            if(scrollTopValue >= topHeight){
                //第二部分固定定位
                $(' .nav').css({
                    position:'fixed',
                    top:0,
                    left:0
                });
                //设置第三部分的值为第二部分的高度,防止滑动的高度大于第一部分的高度的时候第二部分的固定太过突兀
                $('.main').css({
          marginTop:navHeight+10
        });
            }else{
                $(' .nav').css({
                    position:'static',
                    top:0,
                    left:0
                });
                  //设置第三部分的值为原来的高度
                $(' .main').css({
                    marginTop:10
                });
            }
        });
    });
</script>

gxgalaxy

关注

1
点赞
踩
1

收藏

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

文章目录思路知识点源代码思路思路：给页面设置一个滚动事件，时刻监视页面的scrollTop的值如果这个值大于第一部分的高度，就设置第二部分为固定定位如果这个值小于第一部分的高度，就设置第二部分的定位还原知识点 //scrollLeft() 表示获取或者设置元素内容被卷曲出去的宽度. //scrollTop() 表示获取或者设置元素内容...
复制链接

扫一扫

专栏目录