scroll-spy

My attempt at making a scroll spy.

by theoperatore

HTML

<ul class='nav'>
    <li id='nav-about' class='highlighted'><a href='#about'>About</a>

    </li>
    <li id='nav-content'><a href='#content'>Content</a>

    </li>
    <li id='nav-blog'><a href='#blog'>Blog</a>

    </li>
    <li id='nav-events'><a href='#events'>Events</a>

    </li>
    <li id='nav-contact'><a href='#contact'>Contact Us</a>

    </li>
</ul>
<div class='site'>
    <div class='section' id='about'>About Us</div>
    <div class='section' id='content'>Content</div>
    <div class='section' id='blog'>Blog Posts</div>
    <div class='section' id='events'>Events</div>
    <div class='section' id='contact'>Contact Us</div>
</div>

CSS

html, body {
    height: 100%;
}
.nav li {
    display: inline-block;
}
.highlighted {
    text-decoration: none;
    background-color: green;
}
.nav {
    position: fixed;
    top: 0.5em;
    z-index: 777;
}
.nav:after {
    content:" ";
    display: table;
    clear: both;
}
.site {
    margin-top: 3em;
    height: 110%;
    position: relative;
}
.section {
    height: 1000px;
}

JavaScript

var about = document.getElementById('about'),
    content = document.getElementById('content'),
    blog = document.getElementById('blog'),
    events = document.getElementById('events'),
    contact = document.getElementById('contact');

var navAbout = document.getElementById('nav-about'),
    navContent = document.getElementById('nav-content'),
    navBlog = document.getElementById('nav-blog'),
    navEvents = document.getElementById('nav-events'),
    navContact = document.getElementById('nav-contact');

document.addEventListener('scroll', function (ev) {

    if (window.pageYOffset >= about.offsetTop && window.pageYOffset < content.offsetTop) {

        navAbout.classList.add('highlighted');
        navContent.classList.remove('highlighted');
        navBlog.classList.remove('highlighted');
        navEvents.classList.remove('highlighted');
        navContact.classList.remove('highlighted');
    }

    if (window.pageYOffset >= content.offsetTop && window.pageYOffset < blog.offsetTop) {

        navContent.classList.add('highlighted');
        navAbout.classList.remove('highlighted');
        navBlog.classList.remove('highlighted');
        navEvents.classList.remove('highlighted');
        navContact.classList.remove('highlighted');

    }

    if (window.pageYOffset >= blog.offsetTop && window.pageYOffset < events.offsetTop) {

        navAbout.classList.remove('highlighted');
        navContent.classList.remove('highlighted');
        navBlog.classList.add('highlighted');
        navEvents.classList.remove('highlighted');
        navContact.classList.remove('highlighted');

    }

    if (window.pageYOffset >= events.offsetTop && window.pageYOffset < contact.offsetTop) {

        navAbout.classList.remove('highlighted');
        navContent.classList.remove('highlighted');
        navBlog.classList.remove('highlighted');
        navEvents.classList.add('highlighted');
        navContact.classList.remove('highlighted');

    }

    if (window.pageYOffset >=...