JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<div id="header_nav">
    <img src="http://www.zeytinaskina.com/image/data/logo-theme-white.png" alt="" />
</div>

CSS

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

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

#header_nav {
    width:100%;
    height:90px;
    background-color:#d5ac29;
    position:fixed;
    top: 100px;
    left: 0px;
}
#header_nav img {
    margin: 8px 0 0 20px;
}

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().animate({
                height:'62px',
                top: '0px',
            },300);
            $('#header_nav img').stop().animate({
                height:'50px',
                margin:'2px 0px 0px 20px',
            },300);
        }
    }
    
    else{
        if($('#header_nav').data('size') == 'small')
        {
            $('#header_nav').data('size','big');
            $('#header_nav').stop().animate({
                height:'90px',
                top: '100px',
            },300);
            $('#header_nav img').stop().animate({
                height:'65px',
                margin:'8px 0 0 20px',
            },300);
        }  
    }
});