JSFiddle - React, Tailwind, and code Playground

HTML

<div class="head">
  <div class="head-top">
    top info
  </div>
  <div class="head-bottom">
    <div class="desc">desc</div>
    <div class="logo">logo</div>
  </div>
</div>
<div class="main">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita velit fugiat, voluptas sunt eveniet, aperiam odio, quam quaerat quas natus laudantium. Similique, deleniti eveniet incidunt. Fugiat earum perferendis quos ipsum! Magni cumque iure, ab velit reprehenderit laudantium odit. Eligendi dolor, sed repudiandae inventore voluptatum reiciendis ratione voluptates similique qui, doloribus quas velit minus voluptatibus voluptas labore incidunt eius ipsum quam libero! Libero voluptates veniam porro nulla numquam suscipit. Architecto aperiam quis rerum accusamus temporibus quae, qui molestiae rem a animi quas, hic. Quia, omnis odit, qui harum aliquam impedit esse aut est, repellat fugit, nobis dolorum nulla. Quae iure molestiae voluptatem consectetur necessitatibus assumenda maiores, nesciunt culpa voluptas ab nam nihil dolores distinctio reprehenderit error libero. Quo harum suscipit, ratione explicabo et voluptatem veritatis cum, numquam fugit provident exercitationem illum. Dolorum quidem molestias iste adipisci eligendi, a sunt, eum nobis. Atque et tempora eum beatae libero error deserunt dolorem placeat architecto earum quia, excepturi qui, vitae officia labore cupiditate voluptatem doloribus, veniam molestiae inventore corporis tempore sed. Voluptates laudantium quae unde ab quia voluptate quaerat iure eos laboriosam totam temporibus soluta provident sed, possimus rerum est nisi! Dicta libero pariatur exercitationem, modi. Maiores molestias consequatur tenetur molestiae ad officia vel dolorum laborum expedita, deleniti voluptatem enim dicta suscipit itaque, inventore quos voluptas. Quaerat optio quae voluptates quibusdam rerum eum omnis iusto porro perspiciatis neque doloribus, reprehenderit itaque delectus quod minima, officia enim voluptatibus aspernatur...

CSS

body {
  margin: 0;
  padding: 0;
}

.head {
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 20;
}

.head-top {
    height: 45px;
    background: green;
}

.logo {
     height: 60px;
     background: gray;
}

.desc {
    height: 58px;
    background: purple;
}

.unpinned {
    top: 0;
    transition-property: top;
    transition-duration: .2s;
    will-change: top;
}

.main {
  padding-top: calc(45px + 60px + 58px);
}

JavaScript

$(function(){
	var $component = $('.head');

	function scrollOnMob() {
		var scrollTop = $(this).scrollTop();

		if (scrollTop > 45 + 60) {
			scrollTop = 45 + 60;
		}

		$component.css({
			transform: 'translateY(-'+scrollTop+'px)',
		});
	}

	$(window).on('scroll', scrollOnMob);

});