<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.d11{
height:48px;
margin: 0 auto;
background-color:black;
}
.con{
margin:0 auto;
}
.left{
280px;
position: absolute;
background-color: #fff0e8;
left:200px;
top:48px;
bottom: 0;
}
.right{
border:#45beff 1px solid;
position: absolute;
left:480px;
right:200px;
top:48px;
bottom:0;
}
.fa{
position: fixed;
top:0;
}
.d1{
height:500px;
background-color: #1ecc86;
}
.d2{
height:800px;
background-color: red;
}
.d3{
height:1000px;
background-color: yellow;
}
.d4{
height:700px;
background-color: pink;
}
.active{
background-color: #2eb1fc;
border:1px solid black;
}
</style>
</head>
<body onscroll="mm()">
<div class="d11"></div>
<div class="left">
<div b="1">菜单一</div>
<div b="2">菜单二</div>
<div b="3">菜单三</div>
<div b="4">菜单四</div>
</div>
<div class="right">
<div class="d1" a="1"></div>
<div class="d2" a="2"></div>
<div class="d3" a="3"></div>
<div class="d4" a="4"></div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
//当前滑轮滚动的高度离顶部有多远
function mm() {
var scrolltop = window.scrollY;
// console.log(top);
if(scrolltop>48){
$('.left').addClass('fa')
}else{
$('.left').removeClass('fa')
}
$('.right').children().each(function(){
var eletop=$(this).offset().top;
var wintop=eletop-scrolltop;
var winbottom=eletop+$(this).height()-scrolltop;
if(wintop<0 && winbottom>0){
//当前内容对应的菜单应该被选中
var a=$(this).attr('a');
$('.left div[b="'+a+'"]').addClass('active').siblings().removeClass('active');
//此处return 表示结束结束循环的意思
return ;
}
})
}
</script>
</body>
</html>
