<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#head {
height:300px;
}
ol>li {
background: saddlebrown;
height: 700px;
}
ol>li:nth-child(2) {
background: rgb(9, 131, 60);
}
ol>li:nth-child(3) {
background: rgb(51, 19, 139);
}
ol>li:nth-child(4) {
background: rgb(139, 19, 55);
}
ol>li:nth-child(5) {
background: rgb(179, 223, 21);
}
#two {
position: fixed;
top: 40%;
left: 20px;
color: #fff;
background: #fff;
display: none;
}
#two>li {
width: 50px;
height: 30px;
margin: 5px;
background: #000;
}
</style>
<div id="head"></div>
<ol id="one">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<ul id="two">
<li>一楼</li>
<li>二楼</li>
<li>三楼</li>
<li>四楼</li>
<li>五楼</li>
</ul>
<div id="head"></div>
<script>
//加减 50 让顶部留点余地
$('#two li').each(function (i, val) {
//点击切换到 对应元素 触顶部
$(this).click(function () {
$(this).css({background:'red'}).siblings().css({background:'black'});
var ot = $('#one li').eq($(this).index()).offset().top - 50;
$('body,html').animate({ scrollTop: ot }, 1000);
})
})
$(window).scroll(function () {
var st = $(window).scrollTop() + 50;
var wh = $(window).height();
//导航隐藏出现 时机
if(st >= $('#one li').eq(0).offset().top){
$('#two').stop().show();
}else{
$('#two').stop().hide();
}
//获取每个元素距顶部距离 触到顶部时 执行代码
$("#one li").each(function (i,val) {
var ot = $(val).offset().top;
if (st >= ot) {
$("#two li").eq(i).css({background:'red'}).siblings().css({background:'black'});
}
});
})
</script>
网友评论