使用纯CSS

Question

有没有办法用纯CSS更改页面滚动的导航活动类？

EG。喜欢识别一个<div>何时超过另一个或类似的东西。

＆＃13;

＆＃13;

 $(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");
      }
    });
}

＆＃13;

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}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

（Example source）