aaarticlea/png;base64,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" alt="" />
思路：
思路：
1、获取top高度并判断，如果滑动大于的话就让章节浮动
2、获取当前文档章节底部到body顶部的距离{
1.top的高度
2.章节到父级div的高度
3.文档自身的高度
4.相加的和就是文档底部到body的距离
}
3、获取滑动的高度{
如果大于0 并且 小于当前总高度
让当前章节。。。。
否则就移除条件。。
}
4、 判断最后一章
思路
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
background-color: #dddddd;
}
.w{
margin: 0 auto;
width: 980px;
}
.pg-header{
background-color: black;
color: white;
height: 48px;
}
.pg-body .menu{
position: absolute;
left: 200px;
width: 180px;
background-color: white;
float: left;
}
.pg-body .menu .active{
background-color: #425a66;
color: white; }
.pg-body .fixed{
position: fixed;
top: 10px;
}
.pg-body .content{
position: absolute;
left: 385px;
right: 200px;
background-color: white;
float: left;
}
.pg-body .content .item{
height: 900px;
}
</style>
</head>
<body onscroll="Hua();">
<div class="pg-header">
<div class="w"> </div>
</div>
<div class="pg-body">
<div id="menu" class="menu">
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
</div>
<div id="content" class="content">
<div class="item">床前明月管</div>
<div class="item">疑是地上霜</div>
<div class="item" style="height: 100px;">我是郭德纲</div>
</div>
</div>
<script>
function Hua(){
var a = document.body.offsetHeight;
var b = document.getElementById('content').offsetHeight;
var c = document.documentElement.clientHeight;//当前可视高度 var huaGao = document.body.scrollTop;//当前从body滑动的高度
console.log(a, b, huaGao, c)
var caiDan = document.getElementById('menu');
if(huaGao>48){
caiDan.classList.add('fixed');
}else{
caiDan.classList.remove('fixed');
} var items = document.getElementById('content').children;//获取【子div】
for (var i=0;i<items.length;i++){//一章对应一个div一个内容
var currentItem = items[i];//得到每个div内容
//当前标签距离body的高度
var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop;////当前标签距离父级div的高度+父级div距离body的高度
var currentItemWindowTop = currentItemBodyTop - huaGao;//得到剩下的高度
// console.log(currentItemWindowTop);
var currentHeight = currentItem.offsetHeight;//可视范围的自身高度？为什么不是scrollHeight
var bottomHeight = currentItemBodyTop+currentHeight;//获取当前文档底部到body的总高度 if((a+b)==(huaGao+c)){
var mu = document.getElementById('menu').children[0].lastElementChild;
var lis = document.getElementById('menu').getElementsByTagName('li');
for (var m=0;m<lis.length;m++) {
var current_list = lis[m];
if(current_list.getAttribute('class')=='active'){
current_list.classList.remove('active');
break;
}
}
mu.classList.add('active');
return
} if (currentItemWindowTop<0 && huaGao < bottomHeight){
var ziJi = caiDan.getElementsByTagName('li')[i];//得到第一章
console.log(ziJi)//<li class="active">第二章</li>
ziJi.className = 'active';
var lis = caiDan.getElementsByTagName('li');
console.log(lis)//[li.active, li, li]
for(var j=0;j<lis.length;j++){
if(ziJi == lis[j]){ }else{
lis[j].classList.remove('active')
}
}
break;
// caiDan.getElementsBytagName('li')[i].className = 'active';
} }
}
</script>
</body>
</html>
代码