js实现导航吸顶效果
程序员文章站
2023-08-16 17:21:40
话不多说，请看代码：
话不多说，请看代码：
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
上一篇： 吃零食竟能瘦身 哪些零食能帮你瘦身
下一篇： 饮食快速减肥小常识 绕开瘦身误区轻松消脂