JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div class="foo">
        <ul>
            <li>TOP</li>
            <li>menu01</li>
            <li>menu02</li>
            <li>menu03</li>
        </ul>
     </div>

CSS

body{height:2000px;padding-top:250px;}


.foo {
  width: 100%;  
  background: #eee;
    
}
.foo ul li{display:inline-block;padding:10px 20px;}

.fixed {
  position: fixed;
  top: 0;
    background:#666;
}
.fixed ul li{color:#fff;}

JavaScript

var nav    = $('.foo'),
    offset = nav.offset();

$(window).scroll(function () {
  if($(window).scrollTop() > offset.top - 20) {
    nav.addClass('fixed');
  } else {
    nav.removeClass('fixed');
  }
});