Changing the navigation of an Active class on a Scrolling page using pure CSS

Question

Is there a way to change the active navigation class on a scroll page using pure CSS?

Eg. how to recognize when one <div> is above another or something similar.

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

( Example source )