JSFiddle - React, Tailwind, and code Playground

by sQu1rr

HTML

<div id="headbar">
    <div id="wrap-headbar">
        <div id="left-headbar"></div>
        <div id="center-headbar">
            <ul>
                <li><a href="">ГЛАВНАЯ</a></li>
                <li><a id="active" href="">НОВОСТИ</a></li>
                <li><a href="">ИСТОРИЯ</a></li>
                <li><a href="">СТАТЬИ</a></li>
            </ul>
        </div>
        <div id="right-headbar"></div>
    </div>
</div>

CSS

body {
    height: 2000px;
}

#headbar {
    background:#4c82ff;
    width:100%;
    min-height:50px;
}
#wrap-headbar {
}
#left-headbar {
    width:100px;
    height:50px;
    border:1px solid #000;
}
#center-headbar {
    background:red;
    text-align:center;
    width:100%;
    padding:0px;
    position:static;
}
#center-headbar ul {
    margin:0px;
    padding:0px;
    list-style-type:none;
}
#center-headbar li {
    margin:0px;
    padding:0px;
    list-style-type:none;
    display:inline-block;
}
#center-headbar a {
    font-family:Helvetica-Medium;
    color:#b2c9ff;
    padding:10px;
    display:block;
}
#center-headbar a:hover {
    color:#fff;
    text-decoration:none;
}
#center-headbar #active {
    color:#fff;
    border-bottom:2px solid #fff;
}
#right-headbar {
    width:100px;
    height:50px;
    border:1px solid #000;
    position:absolute;
    top:0;
    right:0;
    float:right;
}

JavaScript

$(function () {
    var $centerHeadBar = $('#center-headbar');
    var headerHeight = $centerHeadBar.height();
    var headerPosition = $centerHeadBar.offset().top;
    var headerInitialPosition = headerPosition;
    var lastPosition = 0;
    var scrollUp = false;
    
    $centerHeadBar.width($centerHeadBar.width());
    
    $(window).scroll(function() {
        var position = $(window).scrollTop();
        if (lastPosition > position) {
            if (position <= headerInitialPosition) {
                $centerHeadBar.css( { position: 'static', top: '0px' } );
            } else {
                if (!scrollUp) {
                    headerPosition = position - headerHeight;
                    $centerHeadBar.css( { position: 'absolute', top: headerPosition + 'px' } );
                } else {
                    if (position <= headerPosition) {
                        $centerHeadBar.css( { position: 'fixed', top: '0px' } );
                    }
                }
            }
            scrollUp = true;
        } else {
            scrollUp = false;
            headerPosition = $centerHeadBar.offset().top;
            $centerHeadBar.css( { position: 'absolute', top: headerPosition + 'px' } );
        }
        lastPosition = position;
    });
});