JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<header class="head_wrap">
	<div class="head_desk">
		<div class="head_top">
			<div class="sitewrapper ">
				<div class="head_inr_lft col_left">
					<button class="nav-button menuIcon toggleOpenDiv"></button>	
					<div class="showmeSticky"><a title='title' href="#">Menu</a></div>
				</div>
				<div class="head_inr_middle col_left">
					<div class="logo">
						<h1>Logo here</h1>
					</div>
				</div>
				<div class="head_inr_rght col_right text_right">
					<div class="head_rght_innr text_right">	
						<h2 class="phone_number"><a href='tel:123456789' title='Contact'><i class="fa fa-envelope"></i>(123) 456-789</a></h2>
						<div class="head_addr">
							<p>Address Line 1<br /> Address Line 2<br /> Address line 3</p>
						</div>
					</div>
				</div>
				<div class="clear"></div>			
			</div>			
		</div>
	</div>
</header>
	<div class="dmmytext">content line breaking for testing <br>
	content line breaking for testing <br> content line breaking for testing <br> content line breaking for testing <br>	content line breaking for testing <br>content line breaking for testing <br> content line breaking for testing <br> content line breaking for testing <br>	content line breaking for testing <br>content line breaking for testing <br> content line breaking for testing <br> content line breaking for testing <br>	content line breaking for testing <br>content line breaking for testing <br> content line breaking for testing <br> content line breaking for testing <br>	content line breaking for testing <br>content line breaking for testing <br> content line breaking for testing <br> content line breaking for testing <br>	content line breaking for testing <br>content line breaking for testing <br> content line breaking for testing <br> content line breaking for testing <br>	content line breaking for testing <br>content line breaking for testing <br> content line breaking for...

CSS

.clearfix:after,  .clearfix:before  {
	content:  " ";
	display:  table;
}
.sitewrapper  {
	width:  420px;
	margin:  0 auto;
	overflow:  hidden;
}
.col_left  {
	float:  left;
}
.col_right  {
	float:  right;
}
.text_right  {
	text-align:  right;
}
.headeronMove  {
	width: 100%;
	z-index: 2147483647;
}
.showmeSticky,  .headeronMove .nav-button,  .headeronMove .down-mcaret {
    display: none !important;
}
.headeronMove .showmeSticky {
	display: block !important;
	padding:  0 30px;
}
.head_desk ,  .head_mbl {
    	position: relative;
}
.head_top  {
    background:  #497182;
    top:  0;
    z-index:  99999;
    left:  0;
    right:  0;
  height:150px;
}
.headeronMove div.logo a {
    margin: 10px 0 0;
}
.headeronMove .head_inr_lft {
    padding: 38px 0;
}
div.logo a  {
	display:  block;
	margin:  32px 0;
}
.logo a img  {
	margin-top:  0;
	vertical-align:  middle;
}
.head_inr_lft,  .head_inr_middle,  .head_inr_rght  {
	width:  33.33%;
}
.head_inr_lft  {
	padding:  55px 0;
}
.head_inr_rght .phone_number  {
	display:  block;
	margin-top:  0;
}
.head_inr_rght .head_addr p  {
	color: #fff;
	font-size: 15px;
	line-height:  20px;
	margin-bottom:  0;
}
.logo h1  {
	margin:  0;
	padding:  0;
}
.head_inr_rght h2.phone_number a  {
	color:  #fff;
	font-size:  22px;
	margin:  0;
	text-align:  right;
}
.head_inr_rght h2.phone_number a i.fa  {
	color:  #fff;
	font-size:  22px;
	padding-right:  17px;
	vertical-align:  middle;
}

JavaScript

jQuery(document).ready(function($){
	stickTheHeader();
});

function stickTheHeader(){
	// for homepage have different place where sticky header will be shown
	if(jQuery("body").hasClass("home")){
		var stickyHeaderTop =jQuery("#videoTop").offset().top;
	}
	else{
		var stickyHeaderTop = jQuery('.head_desk .head_top').offset().top;
	}
	jQuery(window).scroll(function(){
		if( jQuery(window).scrollTop() > 150 && jQuery(window).scrollTop() < 300 ) {
			jQuery('.head_desk .head_top').css({position: 'fixed', top: '-150px'});
 			jQuery('.head_desk .head_top').css('top',(jQuery(window).scrollTop()-300));
		} else if ( jQuery(window).scrollTop() > 300 ) jQuery('.head_desk .head_top').css('top',0);
      else jQuery('.head_desk .head_top').css({position: 'relative', top: '0px'});

	});
}