JSFiddle - React, Tailwind, and code Playground

by hellosze

HTML

<div id="header">Header</div>
<div id="wrapper">
    <div id="left">
        <div id="sidebar"><img src="http://fpoimg.com/150x250" alt="Text here!" /></div>
        <div id="sidebar2"><img src="http://fpoimg.com/150x650" alt="Text here!" /></div>        
    </div>
    <div id="right">This is the text of the main part of the page.</div>
    <div class="clear"></div>
</div>
<div id="footer">Footer</div>

CSS

#header {
    background: #c2c2c2;
    height: 50px;
}
#wrapper {
    position: relative;
    min-height: 500px; /* Just as an example */
    width: 500px;
}
#left {
    position: absolute;
    background: #d7d7d7;
    width: 150px;
    height: 100%;
}
#right {
    position: relative;
    width: 350px;
    float: right;
}
#sidebar {
    background: #0096d7;
    width: 150px;
    color: #fff;
}
.clear {
    clear: both;
}
#footer {
    background: #c2c2c2;
    height: 500px; /* Just as an example */
}

JavaScript

$(document).ready(function () {

    var length = $('#left').height() - $('#sidebar').height() + $('#left').offset().top;

    $(window).scroll(function () {

        var scroll = $(this).scrollTop();
        var height = $('#sidebar').height() + 'px';

        if (scroll < $('#left').offset().top) {

            $('#sidebar').css({
                'position': 'absolute',
                'top': '0'
            });

        } else if (scroll > length) {

            $('#sidebar').css({
                'position': 'absolute',
                'bottom': '0',
                'top': 'auto'
            });

        } else {

            $('#sidebar').css({
                'position': 'fixed',
                'top': '0',
                'height': height
            });

        }
    });

});