JSFiddle - React, Tailwind, and code Playground

by Alexey

HTML

<header class="header_absolute">
  <div class="row-1">
    <div class="container_12">
      <div class="grid_12">
        <div class="logo fleft">
          <a href="/" id="logo-img">
            <img src="http://www.lua.org/images/lua-logo.gif">
          </a>
        </div>
        <!-- menu -->
                <nav id="main-nav-menu">
          <ul class="sf-menu sf-js-enabled">
            <li class="active"><a href="/">Menu</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Menu</a></li>
            <!-- <li><a href="#">Menu</a></li> -->
            <li><a href="#">Menu</a></li>
          </ul>
        </nav>        <!-- end menu -->
        <div class="clear"></div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</header>

<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

.header_absolute{
  position: absolute;
  margin: 0px auto;
  width: 100%;
  z-index: 999;
}

.header_fixed{
  position: fixed;
}





.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; float: left; }

JavaScript

$(function(){
    $(window).scroll(function(){

      var header = $("header");

      if($(this).scrollTop() > 172) {
        header
          .addClass('header_fixed');
      } else {
        header
          .removeClass('header_fixed')
          .addClass('header_absolute');
      }
    });
});