JSFiddle - React, Tailwind, and code Playground

HTML

<section class="nav-bar">
    This is fixed.
  </section>
  <section class="content">
    <p>This is a pen.</p>
  </section>

CSS

body {
    height: 2000px;    
}
.content {
    padding-top: 150px;
}
.nav-bar {
    background-color: green;
    height: 100px;
    position:fixed;
    width: 100%;
}

JavaScript

$(function () {
    $(document).on('scroll', function () {
        $('.nav-bar').css('background-color', 'red');
    });
});