有没有办法用纯CSS更改页面滚动的导航活动类？
EG。喜欢识别一个<div>何时超过另一个或类似的东西。
$(document).ready(function () {
$(document).on("scroll", onScroll);
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('nav a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition
&& refElement.position().top + refElement.height() > scrollPosition) {
$('nav ul li a').removeClass("active");
currentLink.addClass("active");
}
else{
currentLink.removeClass("active");
}
});
}header,nav{height:80px}body,html{margin:0;padding:0;width:100%;height:100%}header{position:fixed;top:0;width:100%;background:#fff}nav{width:960px;margin:0 auto}nav ul{margin:20px 0 0}nav ul li{display:inline-block;margin:0 30px 0 0}a{color:#4D4D4D;font-family:sans-serif;text-transform:uppercase;text-decoration:none;line-height:42px}.active{color:#2dbccb}.content,.content>section{width:100%;height:100%}#home{background:#2dbccb}#about{background:#f6c362}#services{background-color:#eb7e7f}#contact{background-color:#415c71}.go-back{margin:0 auto;padding:200px 0;max-width:450px;font-size:16px;text-align:center}.go-back a{color:rgba(255,255,255,.9);line-height:180%;text-transform:none;font-weight:400}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<div class="content">
<section id="home">
<h1 class="go-back"><a href="/sticky-header-change-navigation-active-class-on-page-scroll-with-jquery">Go back to Sticky Header: Change Navigation Active Class on Page Scroll with jQuery</a></h1>
</section>
<section id="about"></section>
<section id="services"></section>
<section id="contact"></section>
</div>