JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-wrapper">

  <header class="header">
    <div class="container">
      <div class="head-links">
       <div class="user-links">
          <a href="#"><span class="d_underline"> User</span></a> 
          <a href="#"><span class="cart"> Cart</span></a> 
        </div>
      </div>
    </div>
  </header>
  
  <div class="navigation-header">
    <div class="container">
      <div class="container-head">
        <div class="logo">
          <a href=""><img src="https://ekipazh-service.com.ua/files/images/all_brands.png"></a>
        </div>
        <div class="menu">
          <nav class="menu-list">
            <ul>
              <li><a href="">Главная</a></li>
              <li><a href="">Как заказать</a></li>
              <li><a href="">Способы оплаты</a></li>
              <li><a href="">Контакты</a></li>
              <li><a href="">О нас</a></li> 
            </ul>
          </nav> 
        </div> 
      </div> 
    </div>
  </div>
  <div class="main">
    <div class="container">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dignissimos quia voluptates sed tempora vero beatae provident inventore, ipsa qui laborum voluptatibus odit, repellat, molestias ullam quas, voluptatum illo dolore!</div>
    <div>Suscipit harum sint quia provident, accusantium nostrum laborum reprehenderit totam dolorum? Soluta maxime ipsum voluptate rerum impedit, vero minima ratione repellat necessitatibus repellendus, iste nihil porro totam enim illum molestias.</div>
    <div>Incidunt enim sapiente distinctio ipsa, harum dignissimos explicabo, ipsum consequuntur amet eveniet veritatis fugiat nam. Vitae sed nihil aspernatur, rerum minima deserunt! Consectetur non est quasi labore eum ut adipisci.</div>
    <div>Doloremque tenetur officia eligendi laudantium, aliquam in. Optio saepe velit necessitatibus libero, porro ex. Quidem similique est doloribus hic, magnam error voluptatibus facilis quasi laborum obcaecati dignissimos eius...

CSS

* {
  margin:0;
  paddong:0;
}

a {
 text-decoration: none;
 color: #fff;
 font-size:17px;
}
ul {
    list-style: none;
}

/* ШАПКА */

.fixed {
  position: fixed;
  z-index: 10;
  width: 100%;
}

.header { 
  background: #66b34e;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0px 20px 0 20px;
}

.navigation-header {
  background: hsla(14, 1%, 5%, 0.83);
    -webkit-box-shadow: 0 9px 9px 0 rgba(0,0,0,.15);
    box-shadow: 0 9px 9px 0 rgba(0,0,0,.15);
    letter-spacing: 1px;
    color: #fff;
}
.user-links {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.head-links {
 display: flex;
 justify-content: flex-end;
}

.head-links a {
    padding: 20px 15px;
  display: flex;
  flex-grow: 1;
  justify-content: center;
}

.head-links a:hover:first-child{
  background-color:  #69c34d;
  transition: all .3s
}




/* НАВИГАЦИЯ */

.logo img {
height: 70px;
 margin: 10px 0;
}
 .container-head {
    display: flex;
    justify-content: space-between;
    align-items: center;  
    flex-wrap: wrap; 
}

.logo {
  flex-grow: 1;
}

.menu {
  justify-content: space-around;
  list-style-type: none;
  flex-grow: 1;
}
.menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 19px;
}

.menu-list a:after {
    display: block;
    content: "";
    border-bottom: 3px solid;
    width: 0%;
    transition: width .3s ease-in-out;
}
.menu-list a:hover:after{
    width: 100%;
}


@media (max-width : 764px) {
  
  .list-items {
      justify-content: center;
  }
  
  .fixed {
    display: none;
  }
  .menu ul {
    flex-wrap: wrap;
  }

  .menu a {
    display: block;
    text-align: center;
    font-size: 22px;
    padding: 10px;
  }
  .menu ul li {
    width: 100%;
  }
  .menu>ul>li:hover {
    border-bottom: none;
  }
  .menu ul li:hover > ul {
    display: flex;
    position: relative;
    flex-direction: inherit;
    width: 100%;
  }

  .menu-list a:after {
    border-bottom: 0;
  }

  .menu-list a:hover {
...

JavaScript

$(function () {
  $(window).scroll(function(event) {
    if($(this).scrollTop() >= $(".header").height()) {

    $(".header").addClass('fixed');
                
  }
  else {
    $(".header").removeClass('fixed');
  }

});
});