js实现导航吸顶效果

时间：2021-05-26

话不多说，请看代码：

<!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>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章