�在data-sc属性上绑定导航对应的锚点ID来实现，没有考虑兼容性，在chrome下有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scroll Listen</title>
</head>
<style>
body{
margin: 0;
padding: 0;
}
nav{
position: fixed;
top: 0;
}
.warp{
position: relative;
}
.scrollwarp{
width: 300px;
height: 400px;
overflow: auto;
margin-top: 70px;
}
.check{
color: red;
background-color: green;
}
</style>
<body>
<div class="warp">
<nav>
<a href="#nav1" data-sc = 'nav1'>nav1i</a>
<a href="#nav2" data-sc = 'nav2'>nav2i</a>
<a href="#nav3" data-sc = 'nav3'>nav3i</a>
<a href="#nav4" data-sc = 'nav4'>nav4i</a>
</nav>
<div class="scrollwarp" id="scrollwarp">
<h1 id="nav1">nav1</h1>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<h1 id="nav2">nav2</h1>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<h1 id="nav3">nav3</h1>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<h1 id="nav4">nav4</h1>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
</div>
</div>
</body>
<script>
;(function(){
//为A标签绑定选中事件
var link = document.getElementsByTagName('a');
var navlist = [];
for(var i = 0; i<link.length; i++){
var alink = link[i];
push_navlist(alink);
(function(a){
a.addEventListener('click', function(e) {
clearcss();
a.className='check';
});
})(alink)
}
function clearcss(){
for(var i = 0; i<link.length; i++){
link[i].className='';
}
}
function push_navlist(alink){
var hrefs = alink.getAttribute('data-sc');
if(hrefs){
var margin_top = document.getElementById(hrefs).offsetTop;
navlist.unshift([hrefs,margin_top]);
}
}
console.log(navlist);
var scroll = document.getElementById('scrollwarp');
scroll.addEventListener('scroll',function(){
//console.log();
for (var i = 0; i < navlist.length; i++) {
if(navlist[i][1] <= scroll.scrollTop){
for(var j = 0; j<link.length; j++){
if(link[j].getAttribute('data-sc')==navlist[i][0]){
clearcss();
link[j].className='check';
}
}
return;
}
};
})
})()
</script>
</html>
网友评论