JSFiddle - React, Tailwind, and code Playground

by saxxi

HTML

<html>
<head>
</head>
<body>
<div id="sidebar"></div>
<div id="content">
Content <br/><br/><br/><br/><br/><br/><br/><br/>
Content <br/><br/><br/><br/><br/><br/><br/><br/>
Content <br/><br/><br/><br/><br/><br/><br/><br/>
Content <br/><br/><br/><br/><br/><br/><br/><br/>
Content <br/><br/><br/><br/><br/><br/><br/><br/>
Content <br/><br/><br/><br/><br/><br/><br/><br/>
Content <br/><br/><br/><br/><br/><br/><br/><br/>
Content <br/><br/><br/><br/><br/><br/><br/><br/>
Content <br/><br/><br/><br/><br/><br/><br/><br/>
Content <br/><br/><br/><br/><br/><br/><br/><br/>
Content <br/><br/><br/><br/><br/><br/><br/><br/>
Content <br/><br/><br/><br/><br/><br/><br/><br/>
Content <br/><br/><br/><br/><br/><br/><br/><br/>
Content <br/><br/><br/><br/><br/><br/><br/><br/>
Content <br/><br/><br/><br/><br/><br/><br/><br/>
Content <br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</body>
</html>

CSS

html, body, * { padding:0; margin:0; }
body{height:2000px;}
#sidebar{float:left; width:200px; height:500px; border:1px solid #000;}
#content{float:right;}

JavaScript

$(document).ready(function(){
    var winHeight = $(window).height();
    var sidebar = $('#sidebar');
    var scrolled = window.offset().top;
        
    $(window).scroll(function(){
        /*if(isScrolledTo(sidebar)){
            sidebar.css('position','fixed');
            sidebar.css('top','0px');
        }*/
        var stopHeight = winHeight - scrolled;
        console.log(stopHeight);
        /*if(stopHeight > sidebar.offset().top){
            sidebar.css('position','absolute');
            sidebar.css('bottom',stopHeight);
        }*/
    });
});