js实现导航吸顶效果

来源：懂视网责编：小采时间：2020-11-27 20:24:44

js实现导航吸顶效果

js实现导航吸顶效果:话不多说，请看代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-

推荐度：

点击下载本文 文档为doc格式

导读js实现导航吸顶效果:话不多说，请看代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-

话不多说，请看代码：

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

js实现导航吸顶效果

js实现导航吸顶效果:话不多说，请看代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-

推荐度：

点击下载本文 文档为doc格式

标签：导航实现 js

热门焦点

js实现导航吸顶效果

js实现导航吸顶效果

js实现导航吸顶效果

最新推荐

猜你喜欢

热门推荐