JSFiddle - React, Tailwind, and code Playground

HTML

<body>
   <div class="gridContainer clearfix">
      <nav id="topNav" class="fluid">
         <ul class="fluid fluidList navSystem">
            <li class="fluid navItem"><a href="#" title="Web">Web</a></li>
            <li class="fluid navItem"><a href="#" title="Photos">Photos</a></li>
            <li class="fluid navItem"><a href="#" title="Videos">Videos</a></li>
            <li class="fluid navItem hide_mobile"><a href="#" title="Music">Music</a></li>
            <li class="fluid navItem"><a href="#" title="People">People</a></li>
            <li class="fluid navItem"><a href="#" title="Places">Places</a></li>
            <li class="fluid navItem"><a href="#" title="Shopping">Shopping</a></li>
            <li class="fluid navItem"><a href="#" title="More">More...</a></li>
         </ul> 
      </nav> <!-- END #topNav -->
       <p>Test</p>
       <p>Test</p>
       <p>Test</p>
       <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
   </div> <!-- END .gridContainer -->
</body>

CSS

#topNav {     
   overflow: hidden; 
   width: 100%;
   height: 29px;
   margin-left: auto;
   margin-right: auto;
   position: fixed;
   top: 0;
   left: 0;
   background-color: #2D2D2D;
   z-index: 999; 
}

#topNav.hidden {
   display: none;
}

JavaScript

var scroll_pos = 0;
var scroll_time;

$(window).scroll(function() {
    clearTimeout(scroll_time);
    var current_scroll = $(window).scrollTop();
    
    if (current_scroll >= $('#topNav').outerHeight()) {
        if (current_scroll <= scroll_pos) {
            $('#topNav').removeClass('hidden');    
        }
        else {
            $('#topNav').addClass('hidden');  
        }
    }
        
    scroll_time = setTimeout(function() {
        scroll_pos = $(window).scrollTop();
    }, 100);
});