jQuery导航条固定定位效果实例代码

2019-11-19 16:28:43

字体：大中小

来源：转载

供稿：网友

实现效果图：

向下滑动时，导航栏固定

代码：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">      *{        margin: 0;        padding: 0;        }      img{        display: block;        margin: 0 auto;      }      img#search.dhgd{        position: fixed;        left: 50%;        margin-left: -596px;        top: 0px;      }    </style>    <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>    <script type="text/javascript">      $(function(){//        给浏览器加滚动条事件        $(window).scroll(function(){          //获得当前已滚动上去的距离          var t = $(document).scrollTop();          console.log('=================='+t)          if(t>126){            $("#search").addClass('dhgd');          }else{            $("#search").removeClass('dhgd');          }        })      })    </script>  </head>  <body style="background: #F1F1F1;">    ![](imgs/img01.png)    ![](imgs/img02.png)    ![](imgs/img03.png)  </body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：基于layer.js实现收货地址弹框选择然后返回相应的地址信息

下一篇：mongoose中利用populate处理嵌套的方法