JSFiddle - React, Tailwind, and code Playground

HTML

<div id="brookmenu" class="default">
    <div id="brookinfo-block">
        <div id="brooklogo">Logo</div>
        <div id="brookcontacts">+38 (000) 000-00-00</div>
    </div>
    
<ul>
        <li><a href="#">Главная</a>

        </li>
        <li><a href="#">Joolma</a>

        </li>
        <li><a href="#">WordPress</a>

        </li>
        <li><a href="#">HTML5&amp;CSS3</a>

        </li>
        <li><a href="#">PHP</a>
        </li>
    </ul>
    <div class="clear"></div>
</div>

<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>
<p>
    Тыц трулалала
</p>

CSS

#brookinfo-block { /* блок, который служит оберткой для логотипа и контактов  */
    float:left;
    width:30%;    
}

#brooklogo {
    font-size:28px;
    color:#000000;
}
#brookcontacts {
    display:none; /* блок контактов изначально скрыт и появится только при прокрутке */
    font-size:12px;
    color:#000000;
}
#brookmenu {
    width: 100%;
    text-transform: uppercase;
    text-align: center;
    line-height: 73px;		
    background: url(../images/menubrookbg.png) repeat-x;
}
#brookmenu ul {
    float:right;
    padding:0;
    margin:0;
    width:70%;
}
#brookmenu li {
    display: inline;
    list-style:none;
    margin: 5px 10px;
}
#brookmenu li a {
    padding:5px 10px;
    color:#000000;
    text-decoration: none;
}
#brookmenu li a:hover {
    background: #ba0000;
    color: #ffffff;
}
#brookmenu.default {
      width:100%;
}
#brookmenu.fixed {
    position:fixed;
    top:0;
    left:0;
    width:100%;
}
.clear {clear: both;}

JavaScript

$(document).ready(function () {

    var $menu = $("#brookmenu");

    $(window).scroll(function () {
        if ($(this).scrollTop() > 110 && $menu.hasClass("default")) {
            $menu.removeClass("default").addClass("fixed");
            $('#brooklogo').fadeOut(0,function(){$('#brookcontacts').fadeIn() //показываем контакты, уже после того, как скрыли логотип
            }) //скрываем логотип
                
            
        } else if ($(this).scrollTop() <= 110 && $menu.hasClass("fixed")) {
            $menu.removeClass("fixed").addClass("default");
            $('#brookcontacts').fadeOut(0,function(){
                $('#brooklogo').fadeIn() //показываем логотип, уже после того, как скрыли контакты
            }) //скрываем контакты
        }
    }); //scroll
});