js实现导航吸顶效果
话不多说,请看代码:
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <title>38demo</title> <linkrel="stylesheet"href="img/mobile-reset.css"rel="externalnofollow"/> <styletype="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; } .titleli{ width:33%; float:left; text-align:center; } .content{ text-align:center; margin-top:20px; z-index:100; } </style> </head> <body> <!--other--> <divclass="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--> <ulclass="titleclearfix"> <li>1</li> <li>2</li> <li>3</li> </ul> <!--content--> <ulclass="contenta1"> <li>11</li> <li>13</li> <li>14</li> <li>21</li> <li>22</li> <li>23</li> </ul> <ulclass="contenta2"> <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> <ulclass="contenta3"> <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> <scriptsrc="js/jquery-1.11.3.min.js"></script> <script> functionnav(){ varheight=0; height=$(".topHeight").height(); $(window).scroll(function(){ varw=$("body").scrollTop()||$(document).scrollTop();//获取滚动值 if(w>height){ $(".title").addClass("titleTap"); }elseif(w<=0){ $(".title").removeClass("titleTap") }else{ $(".title").removeClass("titleTap") } }); } nav(); $(function(){ $(".titleli").click(function(){ varindex=$(this).index(); varoffsetH=$(".content").eq(index).offset().top; console.log(index); console.log(offsetH);$("body").animate({ scrollTop:offsetH-20, },500); }) }) </script> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!