jQuery固定导航栏

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

哎小白

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

阅读量354

点赞数

分类专栏：网页小功能文章标签： jQuery

本文链接：https://blog.csdn.net/qq_39369835/article/details/87655779

版权

网页小功能专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery固定导航栏：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <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 () {
        if($(window).scrollTop()>=$("#topPart").height()){
          $("#navBar").addClass("fixed");
          $("#mainPart").css("marginTop",$("#navBar").height()+10);
        }else{
          $("#navBar").removeClass("fixed");
          $("#mainPart").css("marginTop",10);
        }
      });
    });

  </script>
</head>
<body>
<div class="top" id="topPart">
  <img src="images/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
  <img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
  <img src="images/main.png" alt=""/>
</div>
</body>
</html>

哎小白

关注

0
点赞
踩
0

收藏

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

jQuery固定导航栏：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * { margin: 0; p
复制链接

扫一扫