JSFiddle - React, Tailwind, and code Playground

by joshua_young_design

HTML

<div class="navbar">
      scroll up and down to see it in action
    </div>
    <div class="navbar2">
      scroll up and down to see it in action
    </div>
    <footer></footer>

CSS

body{background-color: #222;;}

.navbar{
  position: fixed;
  width: 100%;
  top: 0;
  left :0;
  padding: 2rem;
  text-align: center;
  color: black;
  font-family: sans-serif;
  background-color: grey;
  transition: 0.3s;
}
.navbar2{
  position: fixed;
  width: 100%;
  top: 6rem;
  left :0;
  padding: 2rem;
  text-align: center;
  color: black;
  font-family: sans-serif;
  background-color: grey;
  transition: 0.3s;
}

.scrolled{
  background-color: dodgerblue;
  transition: 0.3s;
}

footer{height: 200vh; width: 100%;}

JavaScript

$(function() {
    var item1 = $(".navbar");
    var item2 = $(".navbar2");
    var all = $(".navbar, .navbar2")
  
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 50) {
            item1.addClass("scrolled");
        } if (scroll >= 100) {
            item2.addClass("scrolled");
        } if (scroll <= 0) {
            all.removeClass("scrolled");
        }
    });
  
});