JSFiddle - React, Tailwind, and code Playground

by James Connolly

HTML

<body>
  <div class="wrapper">
    <div id="dynamic">
      This allows you to add and/or remove classes after the user has scrolled down a certain amount in a page. <br><br><br><br><br><br><br><br><br>In this case, fill background with orange after scrolling 50px down.
    </div>
  </div>
</body>

CSS

body {
  height: 100%;
  width: 100%;
  background-color:lightblue;
}

.wrapper {
  width:800px;
  height:1500px;
  padding:15px;
  margin:0px auto;
}

#dynamic {
  width:500px;
  border:dashed white;
  border-radius:10%;
  padding:3em;
  font-family:helvetica, arial;
  font-weight:bold;
  font-size:1.5em;
  font-height:1.5em;
  margin:0px auto;
}

.newClass {
  border:none;
  background-color:orange;
}

JavaScript

$(window).scroll(function(){
    if ($(this).scrollTop() > 50) {
       $('#dynamic').addClass('newClass');
    } else {
       $('#dynamic').removeClass('newClass');
    }
});