JSFiddle - React, Tailwind, and code Playground

HTML

<div class='header'>
 <div class='topline'>
  
  </div>
  <div class='topbar'>
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
    <div>test4</div>
  </div>
 
</div>
<div class='content'>
  <div class='content-parta'>
    
  </div>
</div>

CSS

.header {
  position: relative;
  height: 65px;
  background: brown;
  overflow-y: hidden;
  overflow-x: hidden;
}
  
.topline {
  position: absolute;
  top: 0px;
  width: 100vw;
  height: 5px;
  background: blue;
  transition: 0.2s;
}

.topline.long {
  height: 65px;
  transition: 0.2s;
}

.topbar {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 10px;
}

.topbar div {
  flex: 1;
  color: white;
}

.content {
  height: calc(100vh - 65px);
  overflow-y: auto;
  overflow-x: hidden;
}

.content-parta {
  height: 800px;
}

JavaScript

$(document).ready(function() {
	$('.content').scroll(function() {
  	if ($(this).scrollTop() > 0) {
    	if (!$('.topline').hasClass('long'))
      	$('.topline').addClass('long')
    } else {
    	if ($('.topline').hasClass('long'))
      	$('.topline').removeClass('long')
    }
  });
});