JSFiddle - React, Tailwind, and code Playground

by Bryan Weaver

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

      <nav>
          <div class="logo">
              <img src="trafficlight.png" style="width: 80px;">
              <a href="#">WebSite Name</a>
          </div>
          <ul>
              <li><a href="about.html">First</a></li>
              <li><a href="packages.html">Packages</a></li>
              <li><a href="classes.html">Classses</a></li>
              <li><a href="contact.html">Contact Us</a></li>
              <li><a href="links.html">Links</a></li>
          </ul>
      </nav>
      <section class="sec1"></section>
      <section class="content">
          <h1>LoremIpsumLorem<br></h1>
          <p>LoremIpsumLoremIpsumLoremIpsum <b>LoremIpsum</b></p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
             Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy <u>Lorem Ipsum</u> and <u>Lorem Ipsum</u>.<br>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
             <b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b></p>
                       <p>Lorem Ipsum is simply dummy <u>Lorem Ipsum</u> and <u>Lorem Ipsum</u>.<br>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
             <b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b></p>          <p>Lorem Ipsum is simply dummy <u>Lorem Ipsum</u> and <u>Lorem Ipsum</u>.<br>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
             <b>Lorem Ipsum is simply...

CSS

.black {
  background-color: green;
}

body, section {
  background-color: white;
}

JavaScript

$(document).ready(function() {
  $(window).scroll(function() {
  console.log($(document).scrollTop());
    if ($(document).scrollTop() > 0) {
      $("nav").addClass("black");
    } else {
      $("nav").removeClass("black");
    }
  });
});