JSFiddle - React, Tailwind, and code Playground

by pashkes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/is-in-viewport/3.0.0/isInViewport.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet perspiciatis perferendis voluptatibus neque. Similique tempore nisi iure, veritatis ducimus dolore fugiat accusantium exercitationem reprehenderit ut voluptas quo! Optio eius beatae dignissimos
  ducimus quaerat voluptas, mollitia, earum. Obcaecati voluptatem quibusdam, animi voluptate laborum eligendi voluptatum repellat ipsa, repudiandae sunt! Illo animi laborum maxime explicabo praesentium aliquid consectetur accusamus aliquam incidunt expedita
  numquam distinctio impedit magni voluptates mollitia, laboriosam? Quia enim excepturi expedita, sit at quae totam eveniet tenetur eum nisi repellat non ad atque illum deserunt, aut commodi et vitae! Magnam, reiciendis. At dolore fuga quod voluptatum
  autem. Reprehenderit blanditiis, non, minus veniam nam aliquid impedit. Ut, consequuntur, nemo. Minus suscipit dolorum, obcaecati aliquid aspernatur consequatur voluptate natus eum totam laborum voluptates atque a asperiores magni perferendis dolore
  ratione commodi, distinctio quis ipsam nostrum nobis ducimus dolores tenetur. Possimus ad perspiciatis obcaecati, cupiditate sunt dicta culpa provident magnam deleniti natus aperiam maxime! Atque aperiam, tempora assumenda ab saepe consectetur magni.
  Ipsum facere nulla est nesciunt praesentium tenetur eos labore magni ad quis, iure nostrum, rem asperiores optio ex aspernatur! Iste sint molestias iusto. Cumque modi quod beatae voluptate, itaque nostrum, qui sequi quisquam sint nihil officiis unde
  aliquid veniam libero ducimus debitis. Similique saepe quod, quis, nemo velit porro itaque recusandae nam reiciendis adipisci, error minima labore ex! Veniam quibusdam, rem ullam accusamus modi error totam, expedita voluptas ut, consectetur esse autem
  dolorum sed sint maxime saepe sapiente deserunt odit temporibus asperiores quos, eos eveniet sit harum...

CSS

.bottom {
  height: 200px;
  background-color: blue;
}

JavaScript

var element = $('.bottom');

$(window).on('scroll load resize', function () {

	if ($('.bottom:in-viewport')) {
	  element.css('background-color', 'red');
	}

});