JSFiddle - React, Tailwind, and code Playground

by Nikita Ahenbrenner

HTML

<body>
       <nav>☰</nav>
      <section>Lorem</section>
      <section>Ipsum</section>
      <section>Dolor</section>
      <section>Sit</section>
      <section>Amet</section>
      <section>Dolor</section>
      <section>Sit</section>
      <section>Amet</section>
 </body>

CSS

html {
  background: url("http://wallpaperscraft.com/image/mazda_white_front_view_113205_5064x3376.jpg") center / cover;
  background-attachment: fixed;
}
 
body, .scrolling {
  margin: 0;
  height: 100vh;
  overflow: auto;
}
 
nav {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 1em 1.5em;
  margin: 1em;
  border-radius: 70% 15% 40% 11%;
  z-index: 1;
  font-weight: bold;
  font-size: 130%;
}
 
section {
  height: 100vh;
  position: relative;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 20vh "Helvetica Neue", sans-serif;
}
 
section {
  color: #fff;
  background: #000;

}
 nav.white {
  color: #333;
  background: #fff;

}
nav {
  color: #000;
  background: #333;

}

JavaScript

window.addEventListener("DOMContentLoaded", function() {
    var nav = document.querySelector("nav");
    var element = document.querySelector("body");
    document.addEventListener("scroll", function() {
        var progress = 0.5 + window.pageYOffset / element.offsetHeight | 0;
        nav.classList[progress % 2 ? "add" : "remove"]("white")
    })
});