JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<div class="header">HEADER</div>

CSS

body{
    min-height:800px;
    
}
.header{
    background-color: red;
    color: black;
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
}

.change{
    background-color: black;
    color: red;
}

JavaScript

(function($) {
  $(window).scroll(function() {    
      var scroll = $(window).scrollTop();
       //console.log(scroll);
      if (scroll >= 50) {
          //console.log('a');
          $(".header").addClass("change");
      } else {
          //console.log('a');
          $(".header").removeClass("change");
      }
  });
})(jQuery)