JSFiddle - React, Tailwind, and code Playground

by NIlesh Chip

HTML

<div class="parent">
<div class="inner"></div>
</div>
<div class="placeholder"></div><div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>

CSS

.parent{
    position:relative;
    background: gray;
    height: 700px;
    width: 120px;
    padding: .5rem;
}
.fixed{
   position:fixed;
}
.absolute{
    position:absolute;
}
.inner{
    background: red;
    width:120px;
    height: 200px;
}
.placeholder{
    width:100%;
    height: 80px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    background: gray;
}
body{
    padding:0;
}

JavaScript

$(function(){    
	$(window).scroll(function(){ 
        if($(this).scrollTop() >= 0 && $(this).scrollTop() < ($('.parent').height() - $('.inner').height())){            $('.inner').removeClass('absolute').addClass('fixed').css('top', '1rem');
        } else  {
            $('.inner').removeClass('fixed').addClass('absolute').css('top', $('.parent').height() - $('.inner').height());
        } 
    });
});