JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu" class="default">
    <div id="info-block">
        <div id="logo">Logo</div>
        <div id="contacts">+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>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<p>String row...</p>
<div id="footer">Footer text</div>

CSS

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

#logo {
    font-size:28px;
    color:#fff;
}
#contacts {
    display:none; /* блок контактов изначально скрыт и появится только при прокрутке */
    font-size:12px;
    color:#fff;
}
#menu {
    width: 920px;
    text-transform: uppercase;
    text-align: center;
    line-height: 50px;
    background: #69c;
}
#menu ul {
    float:right;
    padding:0;
    margin:0;
    width:70%;
}
#menu li {
    display: inline;
    list-style:none;
    margin: 5px 10px;
}
#menu li a {
    padding:5px 10px;
    color:#fff;
    text-decoration: none;
}
#menu li a:hover {
    background: #36c;
    color: #ff0;
}
#menu.default {
    width:920px;
}
#menu.fixed {
    position:fixed;
    top:0;
    left:0;
    width:100%;
}
.clear {clear: both;}

#footer { 
    position:fixed; 
    bottom:0; 
    width:100%; 
    background:#000;
    color:#ccc;
    font-size:16px;
    line-height:24px;
    text-align:center;
}

JavaScript

$(document).ready(function () {

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

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