<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>楼梯导航</title>
<script src="../jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
li {
height: 700px;
text-align: center;
line-height: 700px;
font-size: 200px;
color: #fff;
list-style: none;
}
dl {
position: fixed;
bottom: 100px;
right: 10px;
/* display: none; */
}
dd {
width: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #000;
background-color: #fff;
border-radius: 15px;
margin: 5px 0;
}
dd:hover{
cursor: pointer;
}
.action {
background-color: black;
color: #fff;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li style="background-color: rgb(255, 38, 0);">01</li>
<li style="background-color: rgb(255, 166, 0);">02</li>
<li style="background-color: rgb(229, 255, 0);">03</li>
<li style="background-color: rgb(55, 228, 2);">04</li>
<li style="background-color: aqua;">05</li>
<li style="background-color: rgb(0, 119, 255);">06</li>
<li style="background-color: rgb(112, 89, 185);">07</li>
</ul>
</div>
<dl>
<dd class="action">1</dd>
<dd>2</dd>
<dd>3</dd>
<dd>4</dd>
<dd>5</dd>
<dd>6</dd>
<dd>7</dd>
</dl>
<script>
var bool = true; //全局声明一个变量用来解决点击dd标签的时候 也会出现滑动的效果
$(window).scroll(function(){ // 当窗口滚动的时候
if(bool){
for(var i = 0; i < $("li").length; i++){ //循环遍历li的数量
if($("li").eq(i).offset().top - $(window).scrollTop() <= 100){ // 如果其中某个li距离文档(当前视口)顶部的距离 减去 整个window窗口顶部滚动的距离小于或者等于 100的时候; 这个100可以根据自己的情况而定
$("dd").eq(i).addClass("action").siblings().removeClass("action"); // 右边的其中某个(和上面的li的索引值是相等的) dd 添加类名为 action 这个样式,其他的 则删除这个样式
}
}
if($(window).scrollTop() + $(window).height() >= $("html").height() - 150){ // 如果整个窗口的滚动高度 + 当前窗口的高度 >= 整个文档的高度 - 150的时候(这个150也是根据自己的情况而定的)
$("dd").last().addClass("action").siblings().removeClass("action"); // 为右边最后一个dd 添加active这个样式,其他的dd删除这个样式
}
}
})
// 2. 当右边的dd点击的时候,滚动到对应索引的li
$("dd").click(function(){ // 当右边dd点击的时候
bool = false;
var i = $(this).index();
var h = $("li").eq(i).offset().top;
$("html").animate({scrollTop : h},800,function(){
bool = true;
});
$(this).addClass("action").siblings().removeClass("action");
})
</script>
</body>
</html>
jquery 楼梯导航
猜你喜欢
转载自blog.csdn.net/HelloWord176/article/details/103689481
今日推荐
周排行