JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Soluta vel perferendis eveniet ipsa error dolores tempora pariatur cumque rem quos eius nostrum tenetur nemo alias aliquam, excepturi numquam nulla unde?</div>
<div>Voluptas expedita doloremque, nesciunt eveniet quos ut sunt omnis et consequuntur quia temporibus delectus maxime voluptates, doloribus sed perspiciatis! Maxime dignissimos beatae porro similique dolores, itaque vel doloremque. Recusandae, omnis.</div>
<div>Debitis excepturi consequuntur, quam neque tempora porro eius, dolor voluptas sapiente, provident eveniet libero unde suscipit sequi atque at! Officiis, voluptas! Odit sunt dolores voluptatem cupiditate reprehenderit ab recusandae repellendus.</div>
<div>Libero excepturi repellendus eos voluptatem in itaque ut adipisci repellat deserunt. Amet quia quis debitis voluptates optio deleniti corporis, mollitia nisi, tempore tempora excepturi, modi alias dicta? Eos, distinctio quas.</div>
<div>In tenetur animi excepturi! Sapiente et aspernatur ipsum facilis, suscipit ad accusamus fuga dolor optio sed unde placeat possimus voluptatibus magnam illo? Id nostrum excepturi sunt suscipit voluptas! Facere, eaque.</div>
<div class="block" style="height:100px;"></div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore consectetur autem pariatur expedita assumenda doloremque error voluptatem accusamus. Voluptatum culpa maxime unde repudiandae ipsum, sequi doloribus voluptatem suscipit fugiat sed.</div>
<div>Provident soluta, atque mollitia ducimus deserunt quo est odit aliquid, numquam quidem, hic quas quae saepe velit! Explicabo ut libero modi perspiciatis ratione tenetur architecto accusamus, nihil sapiente consequuntur iusto.</div>
<div>Doloribus nobis illo blanditiis molestias inventore nisi voluptate aut quis, aspernatur consectetur ab, earum itaque molestiae quae libero laudantium quasi...

JavaScript

$(window).scroll(function(){
if($(window).scrollTop() > 50){
$(".block").css("background-color","#150180")
};
});
 
$(window).scroll(function(){
if($(window).scrollTop() < 50){
$(".block").css("background-color","#FF4C00")
};
});