JSFiddle - React, Tailwind, and code Playground

by Ajay Patel

HTML

<header class="mod-header" data-target-padding="40">
  <div class="container">
    <nav class="navigation">
      <ul>
          <li class="nav-item">
            <a href="collections.html">Collections</a>
          </li>
          <li class="nav-item">
            <a href="products.html">Products</a>
          </li>
          <li class="nav-item">
            <a href="for-sale.html">For sale</a>
          </li>
      </ul>
    </nav>
      <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>
           Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some Some content Some Some content Some Some content Some Some content Some Some content Some Some content Some Some content Some Some content Some content Some content Some content 
  </div>
</header>

CSS

.mod-header {
background-color: #fff;
border-bottom: 1px solid #DDDDDD;
z-index: 901;
}
.mod-header .navigation {
background-color: #f10;
text-align: center;
border: 3px solid green;
}
.mod-header .navigation ul {
    
display: inline-block;
margin: 0;
overflow: visible;
padding: 0;
text-align: center;
}
.mod-header .navigation li {
    
display: block;
float: left;
height: 18px;
margin: 0;
overflow: visible;
padding: 15px 0;
position: relative;
z-index: 910;
}
.mod-header .navigation li a {
color: #171617;
display: inline-block;
font-family: 'Droid Sans',sans-serif;
font-size: 18px;
height: 18px;
margin: 0 20px;
text-align: center;
text-decoration: none;
}
.mod-header-fixed {
left: 0;
margin: 0;
position: fixed;
top: 0;
width: 100%;
}

JavaScript

jQuery(document).ready(function(){
        jQuery(window).scroll(function(){
            if ($(window).scrollTop() > 70){
    	        $("#masthead").addClass("main-header-fixed");
                $(".main-header").stop().animate({ 
                   padding: "5px 0"
                }, 600 );
                $(".main-header").stop().animate({ 
                   padding: "5px 0"
                }, 600 );
            } else if ($(window).scrollTop() < 70) {
                $("#masthead").removeClass("main-header-fixed");
                $(".main-header").stop().animate({ 
                   padding: "15px 0"
                }, 600 );
                $(".main-header").stop().animate({ 
                   padding: "15px 0"
                }, 600 );
            }
        });
    });