JSFiddle - React, Tailwind, and code Playground

by anmol sandal

HTML

<div class="container">
  <div class="top-navigation">
    <nav>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>

CSS

.container {
	    width: 600px;
	    height: 1500px;
	    background-color: #000000;
    }
    .top-navigation {
	    width: 600px;
	    height: 100px;
	    position: fixed;
	    background-color:transparent;
	    z-index: 1501 ;
        color: #fff;
    }
    .top-navigation1 {
	    width: 500px;
	    height: 100px;
	    position:relative;
	    background-color: 'blue';
	    z-index: 1501;
    }

JavaScript

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 100) {
        $(".top-navigation").toggleClass("darkHeader");
    }
});