JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<div class="navbar">
    <div class="headlogo"></div>
</div>

CSS

body{
    height:800px;
}
.navbar{
    height:200px;
    margin-top:300px;
    background:#aaa;    
}
.headlogo{
    height:200px;
    width:100px;
    background:#000;
    display:block;
}

JavaScript

var imageHeight = parseInt($('.headlogo').css('height')),
    stopHeight=imageHeight / 2,
    marginHeight = parseInt($('.navbar').css('margin-top'))
    stopMargin=marginHeight/2;

$(window).scroll(function(e) {
var windowScroll = $(window).scrollTop(),
    newMargin = marginHeight - windowScroll,
    newHeight = imageHeight - windowScroll;
    if(newHeight>=stopHeight){
        $('.headlogo').css("height", newHeight);
        $('.navbar').css("margin-top", newMargin);
    }
    else{
        $('.headlogo').css("height", stopHeight);
    }
});