JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">
               <a href="#" class="logo">
                   <div class="img"></div>
                   <div class="text">Сервисный центр</div>
               </a>
               <nav>
                   <a href="#">
                       <div class="img"></div>
                       <div class="text">Ремонт ноутбуков</div>
                   </a>
                   <a class="komp" href="#">
                       <div class="img"></div>
                       <div class="text">Ремонт компьютеров</div>
                   </a>
               </nav>
               <div class="contact">
                   <div class="phone">+7 495 236-80-02</div>
                   <div class="address">м. Трубная</div>
               </div>
           </header><!--header-->
           <footer class="footer" style="margin: 800px 0 0 0; text-align: center; font-size: 36px;">asdasd</footer>

CSS

.header {position: fixed; height: 100px; background: #e4f1f9; box-shadow: 0 0 3px #696969; display: flex; padding: 0 26px 0 40px; flex-flow: column wrap; justify-content: center; align-content: flex-start; left: 0; bottom: 0; right: 0;}
.header .logo {text-align: center; text-decoration: none;}
.header .logo .img {background: url(../img/logo.png) no-repeat; width: 81px; height: 40px; display: inline-block;}
.header .logo .text {color: #000; font-size: 16px; font-weight: 300; margin: 3px 0 0 0;}
.header .contact {margin: -9px 0 0 37%;}
.header .contact .phone {font-size: 35px; font-weight: 300; color: #000;}
.header .contact .address {margin: 7px 0 0 0; font-size: 21px; color: #000; font-weight: 300; text-align: right;}

JavaScript

var Elem = $('.footer').offset().top;
$(window).scroll(function(){
    if ($(this).scrollTop() > Elem ) {
        $('.header').addClass('unfixed')
    }
});