JSFiddle - React, Tailwind, and code Playground

by kevinjazzmaster

HTML

<body>
  <nav>
    <ul id="nav-bar">
      <li><a class="initialColor" href="#home">Home</a></li>
      <li><a class="initialColor"  href="#news">News</a></li>
      <li><a class="initialColor"  href="#contact">Contact</a></li>
      <li class="initialColor"><a class="initialColor" href="#about">About</a></li>
    </ul>
  </nav>
    <section>
      <div id="row-1"></div>
      <div id="row-2"></div>
    </section>
  </body>

CSS

.changeColor {
  color: black !important;
}

.initialColor {
  color: white;
}

.newClass {
  color: black;
}

#row-1 {
  min-height: 400px;
  background-color: black;
}

#row-2 {
  min-height: 400px;
  background-color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #6660;
  position: fixed;
  width: 100%;
}

li {
  float: left;
}


li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

JavaScript

(function() {

var navBar = document.getElementById('nav-bar');
var rowOne = document.getElementById('row-1');
var rowTwo = document.getElementById('row-2');

var winheight = window.innerHeight || (document.documentElement || document.body).clientHeight;

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    )
}
 
var docheight = getDocHeight();

function amountscrolled(){
    var winheight= window.innerHeight || (document.documentElement || document.body).clientHeight
    var docheight = getDocHeight()
    var scrollTop = window.pageYOffset || (document.documentElement ||          document.body.parentNode || document.body).scrollTop
    var trackLength = docheight - winheight
    var pctScrolled = Math.floor(scrollTop/trackLength * 100) // gets percentage scrolled (ie: 80 or NaN if tracklength == 0)
    var elemList = document.querySelectorAll('.initialColor');
    if(pctScrolled >= 77.5) {
          for (var i = 0; i < elemList.length; i++){
              elemList[i].classList.add('changeColor');
         	}
		} else if (pctScrolled < 77.5) {
          for (var j = 0; j < elemList.length; j++){
              elemList[j].classList.remove('changeColor');
         	}
    } else{
    	return;
    }
}
 
window.addEventListener("scroll", function(){
    amountscrolled()
}, false)

})();