版权声明：版权是个什么玩意儿?看得上随便转 https://blog.csdn.net/Byte_Dance/article/details/83450331
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<!-- 本功能依赖jquery插件,需要引入jquery.js 这里的可以直接到网上搜在线引用地址-->
<script src="public/bs/js/jquery-1.11.0.min.js"></script>
<style>
.active{
background: #fff0f8 !important;
}
</style>
</head>
<body>
<div style="float:left;width:10%;position: fixed;" id="nav">
<p style="color:red">第一层楼</p>
<p>第二层楼</p>
<p>第三层楼</p>
<p>第四层楼</p>
<p>第五层楼</p>
<p>第六层楼</p>
</div>
<div style="float:left;margin-left:10%;">
<!--只要定义为divs类名 都可以使用-->
<div style="width:100px;background:#9100ff;" class="divs active">
<h1>第一层</h1>
<h1>第一层</h1>
<h1>第一层</h1>
<h1>第一层</h1>
<h1>第一层</h1>
<h1>第一层</h1>
<h1>第一层</h1>
<h1>第一层</h1>
<h1>第一层</h1>
</div>
<div style="width:100px;background:#feff2b;" class="divs">
<h1>第二层</h1>
<h1>第二层</h1>
<h1>第二层</h1>
<h1>第二层</h1>
<h1>第二层</h1>
<h1>第二层</h1>
<h1>第二层</h1>
<h1>第二层</h1>
<h1>第二层</h1>
</div>
<div style="width:100px;background:#4145ff;" class="divs">
<h1>第三层</h1>
<h1>第三层</h1>
<h1>第三层</h1>
<h1>第三层</h1>
<h1>第三层</h1>
<h1>第三层</h1>
<h1>第三层</h1>
<h1>第三层</h1>
</div>
<div style="width:100px;background:#69ff58;" class="divs">
<h1>第四层</h1>
<h1>第四层</h1>
<h1>第四层</h1>
<h1>第四层</h1>
<h1>第四层</h1>
<h1>第四层</h1>
<h1>第四层</h1>
<h1>第四层</h1>
</div>
<div style="width:100px;background:#ff7361;" class="divs">
<h1>第五层</h1>
<h1>第五层</h1>
<h1>第五层</h1>
<h1>第五层</h1>
<h1>第五层</h1>
<h1>第五层</h1>
<h1>第五层</h1>
<h1>第五层</h1>
</div>
<div style="width:100px;background:#f835ff;" class="divs">
<h1>第六层</h1>
<h1>第六层</h1>
<h1>第六层</h1>
<h1>第六层</h1>
<h1>第六层</h1>
<h1>第六层</h1>
<h1>第六层</h1>
<h1>第六层</h1>
</div>
<div style="height: 1000px;">
</div>
</div>
</body>
<script>
// 滚动查找指定类滚动到指定高度所要执行的事件
$(document).scroll(function(){
// 1.先获取到元素类的个数
var classLength = $(".divs").length;
// 2.做for循环,循环次数为元素的个数
for(var i = 0;i<classLength ;i++){
// 3.获取到每一个元素减去滚动条到顶部的高度,如果大于0 则表示 元素已经到达顶部
// console.log("滚动条距离顶部高度 : "+ $(window).scrollTop());
// console.log("元素距离顶部高度 "+i+ ": "+$(".divs").eq(i).offset().top);
// console.log("滚动条 减去 元素 : "+ ($(window).scrollTop()-$(".divs").eq(i).offset().top)); // 就可以得到元素是否到达顶部
var myScrollTop = $(window).scrollTop();
var myElementTop = $(".divs").eq(i).offset().top;
var myElementHeight = $(".divs").eq(i).height();
// 1 .当元素的顶部 到达 浏览器窗口顶部 2 .当元素底部在窗口范围内(滚动条减去元素距顶部高度小于元素本身高度)
// 如果想让偏移量往上一点,可以修改数字值,
if(myScrollTop - myElementTop> -120 && myScrollTop - myElementTop < myElementHeight -100 ){
$(".divs").eq(i).addClass("active");
$("#nav p").eq(i).css({"color":"red"});
}else{
// 当元素底部在窗口范围外
$(".divs").eq(i).removeClass("active");
$("#nav p").eq(i).css({"color":"black"});
}
}
// 刚开始想出来的笨办法 ↑ 改进后
/*if(($(window).scrollTop())-($("#div1").offset().top) > 0){
$("#div1").css({"background":"green"});
$("#nav p").eq(0).css({"color":"green"});
}else{
$("#div1").css({"background":"red"});
$("#nav p").eq(0).css({"color":"black"});
}
if(($(window).scrollTop())-($("#div2").offset().top) > 0){
$("#div2").css({"background":"green"});
$("#nav p").eq(1).css({"color":"green"});
}else{
$("#div2").css({"background":"yellow"});
$("#nav p").eq(1).css({"color":"black"});
}
if(($(window).scrollTop())-($("#div3").offset().top) > 0){
$("#div3").css({"background":"green"});
$("#nav p").eq(2).css({"color":"green"});
}else{
$("#div3").css({"background":"blue"});
$("#nav p").eq(2).css({"color":"black"});
}*/
})
</script>
</html>最终效果
