JSFiddle - React, Tailwind, and code Playground

by sp_true

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/mfd/f3d96ec7f0e8f034cc22ea73b3797b59/raw/856f1dbb8d807aabceb80b6d4f94b464df461b3e/gotham.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<body>
  <div class="head-menu">
    <div class="container-fluid menu-bg head-menu__submain-menu submain-menu order-lg-1 order-2 border-top border-t-lg-none">
      <div class="row">
        <div class="container-lg">
          <div class="row justify-content-end">
            <div class="col-12">
              <div class="menu">
                <ul role="menu">
                  <li class="hs-menu-item hs-menu-depth-1" role="none"><a href="/industries" role="menuitem" target="__blank">Industries</a></li>
                  <li class="hs-menu-item hs-menu-depth-1" role="none"><a href="/solutions" role="menuitem" target="__blank">Solutions</a></li>
                  <li class="hs-menu-item hs-menu-depth-1" role="none"><a href="/platform" role="menuitem" target="__blank">Platform</a></li>
                  <li class="hs-menu-item hs-menu-depth-1" role="none"><a href="/about" role="menuitem" target="__blank">About
                      us</a></li>
                  <li class="hs-menu-item hs-menu-depth-1" role="none"><a href="/resources" role="menuitem" target="__blank">Resources</a></li>
                  <li class="hs-menu-item hs-menu-depth-1" role="none"><a href="/resources" role="menuitem" target="__blank">Resources</a></li>
                  <li class="hs-menu-item hs-menu-depth-1" role="none"><a href="/resources" role="menuitem" target="__blank">Resources</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid menu-bg order-lg-2 order-1">
      <div class="row">
        <div class="container-lg...

CSS

body {
  overflow-x: hidden;
  height: 5000px;
  background: gray;
}

.head-menu {
  background: #fff;
  font-family: Gotham, sans-serif;
}

.head-menu .submain-menu .menu>ul,
.head-menu .main-menu .menu>ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

.head-menu .submain-menu .menu>ul>li>a {
  color: #53607e;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}

.head-menu .submain-menu .menu>ul>li:hover>a,
.head-menu .main-menu .menu>ul>li:hover>a {
  color: #faae31;
  text-decoration: none;
}

.head-menu .main-menu .menu>ul>li.tooltip-default>a,
.head-menu .main-menu .menu>ul>li.tooltip-default:hover>a {
  color: #8591a8;
  cursor: default;
}

.head-menu .submain-menu .menu>ul>li {
  transition: .2s ease;
  margin-right: 44px;
  padding: 10px 0;
}

.head-menu .submain-menu .menu>ul>li:last-child {
  margin-right: 0;
}

.head-menu .submain-menu {
  border-bottom: 1px solid #dddfe5;
}

.head-menu .main-menu .main-menu__logo {
  position: relative;
  display: block;
  width: 3.625rem;
  height: 3.625rem;
}

.head-menu .main-menu .main-menu__logo .back {
  transform: rotateY(180deg);
}

.head-menu .main-menu .main-menu__logo .front,
.head-menu .main-menu .main-menu__logo .back {
  backface-visibility: hidden;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: .8s ease;
  width: 3.625rem;
  height: 3.625rem;
}

.head-menu .main-menu .main-menu__logo:hover .back {
  transform: rotateY(360deg);
}

.head-menu .main-menu .main-menu__logo:hover .front {
  transform: rotateY(180deg);
}

.head-menu .main-menu .menu-col {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.head-menu .main-menu .menu {
  margin-right: 5%;
}

.head-menu .main-menu .menu>ul>li {
  cursor: pointer;
  position: relative;
}

.head-menu .main-menu .menu>ul>li>a {
  display: block;
  color: #051d4d;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.1875rem;
  padding: 2.25rem...

JavaScript

$(document).ready(function() {
  function AnimationNav(elem) {
    var navBar = $(elem); //Targets nav element
    var myWindow = $(window);
    var myPosition;
    var navScroll;
    var MenuHeight = $('.head-menu').outerHeight();
    $('.head-menu').css({
      height: MenuHeight
    })

    window.addEventListener('scroll', function(e) {
      navScroll = myWindow.scrollTop();
      if (navScroll < myPosition && navScroll >= 800) {
        setTimeout(function() {
          navBar.css({
            top: 0
          }).addClass('visible')
          console.log('Больше 800')
        }, 400);
      } else {
        navBar.css({
          top: -100
        })
        console.log('Вниз')
      }
      myPosition = myWindow.scrollTop();
      if (myPosition <= 800) { //hide  zone
        navBar.css({
          top: -100
        })
        setTimeout(function() {
          // navBar.removeClass('visible')
        }, 800);
        console.log('От 0 до 800')
      }
    });
  }

  // Animation Menu
  AnimationNav('.order-1')
})