JSFiddle - React, Tailwind, and code Playground

by Michaël Vanbrabandt

HTML

<div class="fd_PageHeader">
      <nav>
          <ul>
              <li><a href="#">Test</a></li>
              <li><a href="#">Test</a></li>
              <li><a href="#">Test</a></li>
              <li><a href="#">Test</a></li>
              <li><a href="#">Test</a></li>
          </ul>
    </nav>
</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

CSS

.fd_PageHeader {
    width:100%;
    background:red;
}
.fd_PageHeader nav ul li {
    display:inline;
    margin-right:20px;
}
p {
    padding:100px 0;    
}

.fixed-top {
    position:fixed;
    top:0;
    z-index:9999;
}

JavaScript

var fixedTops = function() {
   $(window).bind('scroll', function () {
      if ($(window).scrollTop() > 250) {
           if(!$('.fd_PageHeader').hasClass('fixed-top'))
           {
              $('.fd_PageHeader').css({ opacity: '0' }).addClass('fixed-top').animate({
                opacity: 1
              }, 500);
           }
       } else {
           if($('.fd_PageHeader').hasClass('fixed-top'))
           {
               $('.fd_PageHeader').css({ opacity: '0' }).removeClass('fixed-top').animate({
                    opacity: 1
                 }, 500);
           }
       }
    });
};

 fixedTops();