JSFiddle - React, Tailwind, and code Playground

by sp_true

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Header</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link
        rel="https://cdn.rawgit.com/mfd/f3d96ec7f0e8f034cc22ea73b3797b59/raw/856f1dbb8d807aabceb80b6d4f94b464df461b3e/gotham.css">
    <link rel="stylesheet" href="/include/css/style.css">
</head>

<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
                                          ...

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;
 ...

JavaScript

$(document).ready(function () {
    function AnimationNav(elem) {
        var navBar = $(elem); //Targets nav element
        var myWindow = $(window);
        var scrollStart = $(this).scrollTop();
        var myPosition;
        var navScroll;
        
        // navBar.hide();
        // navBar.css({ top: -90})
        window.addEventListener('scroll', function(e) {
            navScroll = myWindow.scrollTop();
            if (navScroll < myPosition) {
                navBar.css({top: 0 }).addClass('visible');  
            }
            else {
                navBar.css({top: -100})  
            }
            myPosition = myWindow.scrollTop();
            if (myPosition < 800) { //hide  zone
                navBar.css({top: 0 })
                // setTimeout(function(){
                    navBar.removeClass('visible');
                // }, 400);
            }
        }); 
    }

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