Highlight Page Nav on Scroll

by kthornbloom

HTML

<nav>
  <a href="#sec1" id="current-nav">Section One</a>
  <a href="#sec2">Section Two</a>
  <a href="#sec3">Section Three</a>
  <a href="#sec4">Section Four</a>
</nav>

<section id="sec1">
  Section One
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores laborum, pariatur velit totam at eveniet quod doloremque unde autem nisi nam delectus fuga. Cumque, nam dicta quos possimus, molestiae voluptate? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores laborum, pariatur velit totam at eveniet quod doloremque unde autem nisi nam delectus fuga. Cumque, nam dicta quos possimus, molestiae voluptate?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores laborum, pariatur velit totam at eveniet quod doloremque unde autem nisi nam delectus fuga. Cumque, nam dicta quos possimus, molestiae voluptate?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores laborum, pariatur velit totam at eveniet quod doloremque unde autem nisi nam delectus fuga. Cumque, nam dicta quos possimus, molestiae voluptate?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores laborum, pariatur velit totam at eveniet quod doloremque unde autem nisi nam delectus fuga. Cumque, nam dicta quos possimus, molestiae voluptate?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores laborum, pariatur velit totam at eveniet quod doloremque unde autem nisi nam delectus fuga. Cumque, nam dicta quos possimus, molestiae voluptate?
</section>

<section id="sec2">
  Section One
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores laborum, pariatur velit totam at eveniet quod doloremque unde autem nisi nam delectus fuga. Cumque, nam dicta quos possimus, molestiae voluptate? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores laborum, pariatur velit totam at eveniet quod doloremque unde autem nisi nam delectus fuga. Cumque, nam dicta quos possimus, molestiae voluptate?Lorem ipsum dolor sit amet, consectetur adipisicing...

CSS

nav {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
}

section {
  padding: 2em;
  line-height: 2em;
  width: 300px;
  margin: 0 auto;
}

nav a:link,
nav a:visited {
  padding: 1em;
  text-decoration: none;
}

#current-nav {
  background: #efefef;
}

JavaScript

let observerOptions = {
    rootMargin: '0px',
    threshold: 0.5
}

const pageNav = document.querySelector('nav');
var observer = new IntersectionObserver(observerCallback, observerOptions);

function observerCallback(entries, observer) {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
        	var entryid = entry.target.getAttribute('id'),
          		currentNav = document.getElementById('current-nav');
          currentNav.setAttribute('id','');
          pageNav.querySelector('a[href="#'+entryid+'"]').setAttribute('id', 'current-nav');
          //console.log(entryid);
        }
    });
};

document.querySelectorAll('section').forEach((i) => {
    if (i) {
        observer.observe(i);
    }
});