JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">
        <div class="header--fixed">
          <div class="header__holder">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, doloribus! Eligendi labore, voluptas quam ex temporibus voluptate dolores eos deleniti, animi maiores expedita quos harum. Cum nam quae molestiae rem.
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, doloribus! Eligendi labore, voluptas quam ex temporibus voluptate dolores eos deleniti, animi maiores expedita quos harum. Cum nam quae molestiae rem.
          </div>
          <div class="header__navigation">
            <div class="header__wrap">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore corrupti, magni eum pariatur quae, minima eius sint? Sunt dolores corrupti unde laboriosam, illo rem enim quis fugit dolor delectus eius.</p>
              <div class="header__content">
                <div class="header__button">
                  <button type="button"></button>
                </div>
                <form class="header__search">
                  <div class="header__search-wrap">
                    <input class="header__input" placeholder="Поиск" type="search" name="s" id="s">
                    <button class="header__search-btn"></button>
                  </div>
                </form>
              </div>
            </div>
            <!--end main-header__wrap-->
          </div>
        </div>
      </header>

     <section class="info">
     <div class="info__text">
         
        <p> 222Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores inventore delectus, sint nihil debitis vero voluptate placeat atque nulla, soluta repellat veniam ut, dolores expedita, mollitia rem beatae nostrum!</p>
        <p> 222Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores inventore delectus, sint nihil debitis vero voluptate placeat atque nulla, soluta repellat veniam ut, dolores...

CSS

.header--fixed {
		position: fixed;
		top: 0;
		left: 0px;
		right: 0px;
		max-width: 1620px;
    background-color: blue;
		width: 100%;
		z-index: 10;
		padding: 0 10px;
		margin: 0 auto;
}

.info__text {
  background-color: red;
}

JavaScript

$(document).ready(function() {

    (function() {
      var navigation = $('.header--fixed')
      var media = matchMedia('(max-width: 960px)'),
        matches = media.matches

      listener()

      $(window).resize(listener);
      media.addListener((e) => {
        matches = e.matches
        listener()

      })

      $(window).scroll(listener)

      function listener() {
        var padTop = $('.header--fixed').outerHeight(true)

        $('.header+section').css({
          'padding-top': padTop + 'px'
        });

        var scrollTop = $(window).scrollTop()


        if (matches) {
          heightHeader = $(".header__holder").outerHeight(true) + $('.header__content').height();

        } else {
          heightHeader = $(".header__holder").outerHeight(true)
        }

        if (heightHeader <= scrollTop) {
          $('.header__navigation .header__wrap').addClass('header__navigation--fixed');
          navigation.css({
            'top': -heightHeader + 'px'
          });
        } else {
          $('.header__navigation .header__wrap').removeClass('header__navigation--fixed');
          navigation.css({
            'top': -scrollTop
          });
        }


      }
    })()


  });