JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    Шапка
</div>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aperiam magnam nobis at ipsa corporis blanditiis vero tenetur velit repellendus. Debitis non reiciendis unde sed quasi officia quae illo at.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos vero quam reiciendis quidem veritatis hic cum minus sit maxime unde necessitatibus nostrum fugit cumque. Molestias dolore vero perferendis asperiores quo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod recusandae possimus nesciunt itaque libero eum quisquam dolores animi autem quis repudiandae dicta saepe excepturi expedita earum incidunt atque pariatur quae?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aperiam magnam nobis at ipsa corporis blanditiis vero tenetur velit repellendus. Debitis non reiciendis unde sed quasi officia quae illo at.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos vero quam reiciendis quidem veritatis hic cum minus sit maxime unde necessitatibus nostrum fugit cumque. Molestias dolore vero perferendis asperiores quo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod recusandae possimus nesciunt itaque libero eum quisquam dolores animi autem quis repudiandae dicta saepe excepturi expedita earum incidunt atque pariatur quae?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aperiam magnam nobis at ipsa corporis blanditiis vero tenetur velit repellendus. Debitis non reiciendis unde sed quasi officia quae illo at.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos vero quam reiciendis quidem veritatis hic cum minus sit maxime unde necessitatibus nostrum fugit cumque. Molestias dolore vero perferendis asperiores quo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod recusandae possimus nesciunt itaque libero eum...

CSS

.header {
    background: #f00;
    height: 80px;
    line-height: 80px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    text-align: center;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
.header.collapsed {
    height: 40px;
    line-height: 40px;
}

.content {
    margin-top: 80px;
}

JavaScript

$(window).scroll(function() {
    var $block = $('.header'); // ID шапки

    if($(window).scrollTop() > 150) {
        $block.addClass('collapsed');
    } else {
        $block.removeClass('collapsed');
    }
});