JSFiddle - React, Tailwind, and code Playground

HTML

<article>
             <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam ratione maiores blanditiis, quidem perferendis sint temporibus aut mollitia dolore dolores! Obcaecati soluta totam, dolore dicta, commodi nisi numquam odio quas.</div>
             <div>Ad saepe quis modi sunt iste? Et repellendus veritatis ea reprehenderit delectus, sit alias, tempora unde fuga adipisci id excepturi consectetur praesentium asperiores dignissimos quisquam. Nihil explicabo possimus omnis quibusdam!</div>
             <div>Molestias velit eveniet voluptates quidem architecto repellat voluptas ipsa quas dignissimos commodi debitis reiciendis, porro quia animi odit, nulla! Magni asperiores et, aliquid quidem ipsa soluta. Est sint, eum esse!</div>
             <div>Pariatur harum nobis suscipit, deleniti impedit consequatur laborum! Eligendi minima repudiandae, at accusamus perferendis sed animi eaque officiis iusto ipsa vel, soluta, atque placeat consectetur reprehenderit assumenda quos beatae. Tempore!</div>
             <div>Facilis expedita provident aut recusandae nostrum eaque, totam, iste alias hic neque non ipsam aliquid voluptatum pariatur nemo blanditiis, beatae quo voluptatem veniam dolorem? Sit officiis, modi magni praesentium fuga?</div>
           </article>
           <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>
             ...

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;}
.unfixed {position: relative;}
article {font-size: 36px;}
footer {height: 245px;}

JavaScript

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