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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！