JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="1">
    <p>
    <b>1 - UNKNOWN HEIGHT</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sodales mi, et viverra diam. Cras id metus ex. Proin id dolor in mi pellentesque auctor porta a dui. Maecenas suscipit laoreet mi non suscipit. Vestibulum volutpat sapien eget nibh ultrices elementum ac eu velit. Vivamus in condimentum ex. Fusce id imperdiet lorem, eget varius orci. Praesent rhoncus a mi at dictum. Donec mollis euismod eros.

Sed enim sem, tempus vel eros at, semper efficitur nisi. Proin sit amet lacus rhoncus leo cursus facilisis. In ullamcorper ligula augue, vel suscipit massa tincidunt eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus tempus lorem consectetur venenatis tristique. Quisque auctor, lorem eget consequat condimentum, nisi lacus vestibulum mauris, eget ornare sapien odio eu urna. Donec non ex posuere, efficitur erat nec, aliquam felis. Proin pharetra sit amet augue nec porttitor.

Aliquam hendrerit metus ac arcu auctor, ut venenatis quam porttitor. Fusce laoreet rutrum lacus nec feugiat. Donec porttitor venenatis libero. Curabitur dapibus in ipsum et pulvinar. Etiam finibus mattis lacinia. Vivamus turpis leo, sollicitudin id rhoncus nec, fermentum ornare sapien. Praesent nisi nibh, accumsan ac est eu, pharetra ultricies turpis.
    </p>
  </div>
  
  <div class="2">
    <p>
    <b>2</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sodales mi, et viverra diam. Cras id metus ex. Proin id dolor in mi pellentesque auctor porta a dui. Maecenas suscipit laoreet mi non suscipit. Vestibulum volutpat sapien eget nibh ultrices elementum ac eu velit. Vivamus in condimentum ex. Fusce id imperdiet lorem, eget varius orci. Praesent rhoncus a mi at dictum. Donec mollis euismod eros.

Sed enim sem, tempus vel eros at, semper efficitur nisi. Proin sit amet lacus rhoncus leo cursus facilisis. In ullamcorper ligula augue, vel suscipit massa...

CSS

div {
  background: none;
  transition: all .2s;
  padding: 5px 20px;
  font-family: sans-serif;
  font-size: 14px;
}

.scrolled {
    background: black;
    color: white;
}

JavaScript

jQuery(window).scroll(function(){
    var fromTopPx = 50; // distance to trigger
    var scrolledFromtop = jQuery(window).scrollTop();
    if(scrolledFromtop > fromTopPx){
        jQuery('.2').addClass('scrolled');
    }else{
        jQuery('.2').removeClass('scrolled');
    }
});