JSFiddle - React, Tailwind, and code Playground

by andrex87

HTML

<div id="menu" class="default">
			
<ul class="menu">
<li class="item-101 current active"><a href="/" >Главная</a></li><li class="item-152"><a href="/dostavka-i-oplata.html" >Доставка и оплата</a></li><li class="item-153"><a href="/service.html" >Сервис</a></li><li class="item-177"><a href="/warranty.html" >Гарантия</a></li><li class="item-106"><a href="/contact-us.html" >Контакты</a></li></ul>

		</div>
<p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>
    <p>String row...</p>

CSS

#menu {
  color: #0061A1;
  text-transform:uppercase;
  font-family: Tahoma, Geneva, sans-serif;
  font-weight:bold;
  background: none;
  font-size:20px;
  float:left;
  display:block;
}  
 
 
#menu ul {
  font-size: 18px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  position: relative; left: 20%;
}




#menu ul li {
  display: inline;
  float: left;
}

#menu li a {
  display: block;  
  padding: 8px 20px;
  color: #0061A1;
  margin-right: 2px;
  font-style:normal;
  text-decoration: none;
}
#menu li a:hover {
  display: block;  
  padding: 7px 20px;
  color: #D01820;
  margin-right: 2px;
}  
#menu.default {
   width:920px;
}
#menu.fixed {
   position:fixed;
    top:0; left:0;
    width:100%;
}

JavaScript

$(document).ready(function(){
 
        var $menu = $("#menu");
 
        $(window).scroll(function(){
            if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){
                $menu.removeClass("default").addClass("fixed");
            } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
                $menu.removeClass("fixed").addClass("default");
            }
        });//scroll
    });