JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav>
Links...
</nav>
<div class="some-content"></div>

CSS

body{
  background:yellow;
}
.some-content{
  height:2000px;
}
nav{
  text-align:center;
  position:fixed;
  width:90%;
  border:1px solid black;
  transition: background .3s ease;
  color:orange;
  padding:20px;
}

.animate{
  background:black;
}

JavaScript

$(window).scroll(function() {
    if ($(document).scrollTop() > 100) {
        $("nav").addClass("animate");
            } else {
        $("nav").removeClass("animate");
    }
});