JSFiddle - React, Tailwind, and code Playground

by lukoschenko

HTML

<div class="section-1">
    <div class="section"></div>
</div>

CSS

body{
    height:800px;
}
.section-1{
   width:100%;
    height:500px;
    margin-top:200px;
    background:#aaa;    
}
.section{
    height:200px;
    width: 90%;
    background:#000;
    display:block;
}

JavaScript

var imageHeight = parseInt($('.section').css('width')),
    stopHeight=imageHeight / 2,
    marginHeight = parseInt($('.section-1').css('margin-top'))
    stopMargin=marginHeight/2;

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