<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>滚动菜单</title>
<meta charset="UTF-8">
<script src="jquery-3.4.1.js"></script>
<style>
.menu{
position: absolute;
width: 220px;
left: 200px;top:48px;
bottom: 0;
border:1px solid red
}
#content{
position: absolute;
left: 420px;
top:48px;
bottom: 0;
right:200px;
border:1px solid greenyellow;
/*overflow: auto;*/
}
.left{
position: fixed;
top:0;/*使小菜单距离上部0*/
}
.active{
background-color: #0080ff;
}
a{
display: block;
}
.re{
position: fixed;
background-color: #fff0e8;
width: 60px;
height:50px;
bottom: 0;right:0;
border:1px solid red;
cursor:pointer;
}
</style>
</head>
<body style="margin:0">
<!--1.监听滑轮的滚动事件
2.如何获取当前滚轮滑动的高度------$('body').scrollTop()
如果要上面菜单，而不要左边菜单，在中间内容加上overflow:auto(如后台管理页面的布局);
3.onscroll事件
4.scrollTop()获取滑轮滑动的高度（距离上边的高度）
scrollLeft()获取距离左边的高度
5.如何获取标签距离顶部的高度
（1）获取某个标签距离文档顶部高度：$('..').offset().top
（1.1）获取当前标签自己的高度：$('..').height()----（永远获取自己高度）
（1.2）$('..').innerHeight()：（永远获取自己高度+padding）获取第一个匹配元素内部区域高度（包括补白，不包括边框）
（1.3）$('..').outerHeight()：
参数一：<false>（永远获取自己高度+padding+border）获取第一个匹配元素外部区域高度（默认包括补白和边框）
参数二：<true>（永远获取自己高度+padding+border+margin），设置为true时，计算边框在内-->
<div style="height: 48px;background-color: black"></div>
<div id='menu' class="menu left">
<a b="1">菜单一</a>
<a b="2">菜单二</a>
<a b="3">菜单三</a>
<a b="4">菜单四</a>
</div>
<div id="content">
<div id="id1" a="1" class="section" onclick="function1()" style="height:800px;background-color: #ee5555">-</div>
<div id="id2" a="2" class="section" onclick="function2()" style="height:900px;background-color: black">-</div>
<div id="id3" a="3" class="section" onclick="function3()" style="height:1000px;background-color: yellow">-</div>
<div id="id4" a='4' class="section" onclick="function4()" style="height:1200px;background-color: blueviolet">-</div>
</div>
<div class="re" onclick="back()">返回</div>
<script src="jquery-3.4.1.js">
function back() {//返回顶部
$(window).scrollTop=0;
}
window.onscroll=function(){//给window绑定滚动事件
var scroll_top=$('body').scrollTop;
if(scroll_top>48){
$('#menu').addClass('left');
}else{
$('#menu').removeClass('left');
//$('#menu a').removeClass('active');
}
// var title=49;//$('#id1').offset().top----得到距离顶部高度49
// var top_dis=title-scroll_top;
// if(top_dis<0){
// //给左边的菜单一加上active
// }
$('#content').children().each(function () {
var ele_top_dis=$(this).offset().top;//this指当前文档
var up_top_dis=ele_top_dis-scroll_top;//文档上边距离顶部的高度
var bottom_top_dis=ele_top_dis+$(this).height-scroll_top;//文档下边距离顶部的高度
//窗口的高度：$(window).height()
//获取整个文档的高度：$(document).height()
var doc_height=$(document).height();
var win_height=$(window).height();
if(doc_height-win_height==scroll_top){//到达最底部，给最后一个菜单加上active
$('#menu a:last').addClass('active').siblings().removeClass('active');
}else{
if(up_top_dis<=0 && bottom_top_dis>0){
//当前内容对应的菜单应该被选中
//给当前内容对应的菜单加上active,给他的兄弟去掉active
var a=$(this).attr('a');
$('#menu a[b="'+a+'"]').addClass('active').siblings().removeClass('active');
//此处b属性=a的值
return;//return 作用：终止循环，each不再检查其他的内容了
}
}
})
}
</script>
</body>
</html>
