JSFiddle - React, Tailwind, and code Playground

Flypgsva Menu

by Ufuk Ozdemir

HTML

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<div id="header_nav">
    <img src="http://www.izarge.com/flypgsva-logo.png" alt="" />
</div>

CSS

*{
    margin: 0px;
    padding: 0px;
}

body {
    height:1000px;
    width:100%;
	background-color: #f1f1ee;
}

#header_nav {
    width:100%;
    height:58px;
    background-color:#fbb731;
    position:fixed;
    top: 0px;
    left: 0px;
}
#header_nav img {
    margin: 10px 0 0 20px;
	max-height: 40px;
	width: auto;
}

JavaScript

$(function(){
    $('#header_nav').data('size','big');
});

$(window).scroll(function(){
    if($(document).scrollTop() > 100){
        if($('#header_nav').data('size') == 'big')
        {
            $('#header_nav').data('size','small');
            $('#header_nav').stop().css(
				'box-shadow', '0px 0px 6px #777'
			).animate({
                height:'44px',
            },300);
            $('#header_nav img').stop().animate({
                height:'28px',
                margin:'10px 0px 0px 20px',
            },300);
        }
    }else{
        if($('#header_nav').data('size') == 'small')
        {
            $('#header_nav').data('size','big');
            $('#header_nav').stop().css(
				'box-shadow', 'none'
			).animate({
                height:'58px',
            },300);
            $('#header_nav img').stop().animate({
                height:'40px',
                margin:'10px 0 0 20px',
            },300);
        }  
    }
});