JSFiddle - React, Tailwind, and code Playground

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

#headbar {
    background:#4c82ff;
    width:100%;
    min-height:50px;
}
#wrap-headbar {
}
#left-headbar {
    width:100px;
    height:50px;
    border:1px solid #000;
    
body {
  
  height: 1000px;
}
}
#center-headbar {
    background:#4c82ff;
    text-align:center;
    width:100%;
    padding:0px;
    position:fixed;
}
#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 $headBar = $('#headbar');
    var $centerHeadBar = $('#center-headbar');
    var HeaderTop = $headBar.offset().top;
    var HeaderTop = $centerHeadBar.offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() > HeaderTop) {
            $headBar.css({
                position: 'static',
                top: '0px'
            });
            $centerHeadBar.css({
                top: '0px'
            });
        } else {
            $headBar.css({
                position: 'fixed',
                top: '0px'
            });
            $centerHeadBar.css({
                top: '50px'
            });
        }
    });
});