js实现导航吸顶效果

2019-11-19 17:25:16

字体：大中小

来源：转载

供稿：网友

话不多说，请看代码：

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <title>38demo</title>    <link rel="stylesheet" href="img/mobile-reset.css" rel="external nofollow" />    <style type="text/css">      html,body{        width:100%;        height:100%;      }      .title{        width:100%;        margin-bottom:20px;        background: #fff;      }      .titleTap{        position:fixed;        left:0;        top:0;      }      .a1{        margin-top:20px;      }      .title li{        width:33%;        float:left;        text-align: center;      }      .content{        text-align: center;        margin-top:20px;        z-index:100;      }    </style>  </head>  <body>    <!--other-->    <div class="topHeight">      <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>        <li>7</li>        <li>8</li>        <li>9</li>        <li>10</li>      </ul>    </div>    <!--title-->    <ul class="title clearfix">      <li>1</li>      <li>2</li>      <li>3</li>    </ul>    <!--content-->    <ul class="content a1">      <li>11</li>      <li>13</li>      <li>14</li>      <li>21</li>      <li>22</li>      <li>23</li>    </ul>    <ul class="content a2">      <li>21</li>      <li>22</li>      <li>23</li>      <li>21</li>      <li>22</li>      <li>23</li>      <li>21</li>      <li>22</li>      <li>23</li>      <li>21</li>      <li>22</li>      <li>23</li>      <li>21</li>      <li>22</li>      <li>23</li>      <li>21</li>      <li>22</li>      <li>23</li>      <li>21</li>      <li>22</li>      <li>23</li>      <li>21</li>      <li>22</li>      <li>23</li>    </ul>    <ul class="content a3">      <li>31</li>      <li>32</li>      <li>33</li>      <li>21</li>      <li>22</li>      <li>23</li>      <li>31</li>      <li>32</li>      <li>33</li>      <li>21</li>      <li>22</li>      <li>23</li>      <li>31</li>      <li>32</li>      <li>33</li>      <li>21</li>      <li>22</li>      <li>23</li>      <li>31</li>      <li>32</li>      <li>33</li>      <li>21</li>      <li>22</li>      <li>23</li>      <li>31</li>      <li>32</li>      <li>33</li>      <li>21</li>      <li>22</li>      <li>23</li>      <li>31</li>      <li>32</li>      <li>33</li>      <li>21</li>      <li>22</li>      <li>23</li>    </ul>    <script src="js/jquery-1.11.3.min.js"></script>    <script>        function nav(){      var height=0;        height = $(".topHeight").height();      $(window).scroll(function() {        var w = $("body").scrollTop() || $(document).scrollTop(); //获取滚动值        if(w > height) {$(".title").addClass("titleTap");        } else if(w <= 0){$(".title").removeClass("titleTap")        }else{$(".title").removeClass("titleTap")        }      });    }    nav();      $(function() {        $(".title li").click(function() {          var index = $(this).index();          var offsetH = $(".content").eq(index).offset().top;          console.log(index);          console.log(offsetH);          $("body").animate({scrollTop: offsetH-20,          }, 500);        })      })    </script>  </body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：angularjs点击图片放大实现上传图片预览

下一篇：canvas绘制多边形