JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nofix">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus dictum dui eu viverra. Phasellus justo dui, faucibus eget magna vel, sagittis mattis ipsum. Duis pharetra molestie ante. Nam in rutrum justo, id ornare orci. Suspendisse et sem et odio mattis varius non a tellus. Donec consequat auctor lacus, vitae porttitor nibh auctor non. Nunc vitae leo at lorem fermentum tincidunt adipiscing id enim. Vestibulum mollis tincidunt semper. Ut hendrerit justo magna, vel hendrerit metus suscipit a. Donec in ligula vitae purus molestie varius id a justo. Phasellus eleifend odio et mollis bibendum. In tincidunt est malesuada ullamcorper ullamcorper. Suspendisse magna urna, consectetur fringilla lacus tincidunt, tempor pulvinar leo. Pellentesque rutrum luctus viverra. Nam blandit augue vel libero ultrices, id molestie risus viverra. </div>
<div id='fixer'>
    <img class="fase" src="http://golos-molodeji.org/wp-content/uploads/2013/07/facebook_logo.png"/>
</div>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus dictum dui eu viverra. Phasellus justo dui, faucibus eget magna vel, sagittis mattis ipsum. Duis pharetra molestie ante. Nam in rutrum justo, id ornare orci. Suspendisse et sem et odio mattis varius non a tellus. Donec consequat auctor lacus, vitae porttitor nibh auctor non. Nunc vitae leo at lorem fermentum tincidunt adipiscing id enim. Vestibulum mollis tincidunt semper. Ut hendrerit justo magna, vel hendrerit metus suscipit a. Donec in ligula vitae purus molestie varius id a justo. Phasellus eleifend odio et mollis bibendum. In tincidunt est malesuada ullamcorper ullamcorper. Suspendisse magna urna, consectetur fringilla lacus tincidunt, tempor pulvinar leo. Pellentesque rutrum luctus viverra. Nam blandit augue vel libero ultrices, id molestie risus viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus dictum dui eu viverra. Phasellus justo dui, faucibus eget magna...

CSS

#fixer{
    height: 150px;
    width:100%;
    background: red;
}
.fase{
    margin-top:10px;
}

JavaScript

var logoHeight =$('.fase').height();
var menuHeight = $("#fixer").height();
var tops = $("#fixer").offset();
var topss = tops.top
var flag = true
function fixerStop(){
		var top  = $(document).scrollTop();
		
		if ( top > topss && flag) { flag = false;		
			$('#fixer').css({'position':'fixed','top':0});
			$('.fase').animate({ 'height':"20px" , 'margin-top': '5px'},{queue:false, duragon : 150});
            $('#fixer').animate({ 'height':"25px"},{queue:false, duragon : 150});
			return false;
			}
    else if(top < topss && !flag){flag = true;
            $('#fixer').css({'position':'relative'});
			$('.fase').animate({ 'height' : logoHeight , 'margin-top': '20px' },{queue:false, duragon : 150});
                $('#fixer').animate({ 'height':"150px"},{queue:false, duragon : 150});
			return false;
		}
	}

	$(document).scroll( function(){ 	
		fixerStop(); 
	} );
	
	fixerStop();