<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<style>
.menu{
position: absolute;
left: 200px;
top: 48px;
bottom: 0;
width: 220px;
border: 1px solid red;
}
.fa{
position: fixed;
top: 0;
}
#menu a{
display: block;
}
.active{
background-color: #364e98;
color: white;
}
</style>
</head>
<body style="margin: 0" onscroll="Gun()">
<div style="height: 48px;background-color: #303030"></div>
<div id="menu" class="menu">
<a b="1">菜单一</a>
<a b="2">菜单二</a>
<a b="3">菜单三</a>
<a b="44">菜单四</a>
</div>
<div id="content" style="position: absolute;left: 420px;top: 48px;bottom: 0;right: 200px;border: 1px solid red">
<div id="id1" a="1" style="height: 500px;background-color: #364e98"></div>
<div id="id2" a="2" style="height: 800px;background-color: #77bafc"></div>
<div id="id3" a="3" style="height: 1000px;background-color: sandybrown"></div>
<div id="id4" a="44" style="height: 80px;background-color: fuchsia"></div>
</div>
<script src="jquery-3.5.1.js"></script>
<script>
function Gun() {
// console.log(1);
var scr=$(‘html,body‘).scrollTop(); // $(‘body‘).scrollTop();不管用时，用$(‘html,body‘).scrollTop();
// console.log(scr);
if (scr>48) {
$("#menu").addClass("fa");
} else {
$("#menu").removeClass("fa");
$(‘#menu a‘).removeClass(‘active‘);
}
$("#content").children().each(function () {
var eleTop=$(this).offset().top; // 标签定顶部到窗口顶部的距离
var winTop=eleTop-scr;
var winBottomTop=eleTop+$(this).height()-scr;
var docHeigt=$(document).height(); // 文档高度
var winHeight=$(window).height(); // 窗口高度
// var cha=docHeigt-winHeight;
if( docHeigt-(winHeight+scr)<1){
$(‘#menu a:last‘).addClass("active").siblings().removeClass("active"); // a:last
}else {
if(winTop<0 && winBottomTop>0){
var a_Class=$(this).attr("a");
// $("#menu a[b=‘"+aClass+"‘]").addClass("active").siblings().removeClass("active");
$(‘#menu a[b="‘+a_Class+‘"]‘).addClass("active").siblings().removeClass("active");
return; // 退出循环
}
}
})
}
// var tit=49;
// var top=tit-scr;
// if(top<0){
// // $("#menu a:first").addClass("active"); // first
// $(‘.menu [b="1"]‘).addClass("active"); // 属性选值
// }
// padding: 2px;
// height: 500px;
// background-clor: #364e98;
// border: solid red 10px;
// margin-top: 7px;
// var aa=$(‘#id2‘).offset().top;
// alert(aa); 元素顶部距离顶部高度（偏移量）
// $(‘#id1‘).offset(); 1. {top: 49, left: 421} 2. 有margin-top： {top: 56, left: 421}
// $(‘#id1‘).height(); 元素高度
// $(‘#id1‘).innerHeight(); 高度：自身高度 + padding
// $(‘#id1‘).outerHeight(); 1. 高度：自身高度 + padding + border 2. 有margin-top：自身高度 + padding + border + margin（上下左右）
// $(window).height(); // 窗口高度
// $(document).height(); // （约等于）文档高度 ==> 1706.4000244140625
</script>
</body>
</html>
jquery_高度-小脚本