JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="sidebar">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo blandit sem, id scelerisque erat malesuada ac. Sed dictum metus quis mauris faucibus, at accumsan tellus accumsan. Fusce volutpat nibh at ante ultrices, ac facilisis sapien faucibus. Etiam lobortis enim ac libero auctor facilisis. Quisque lacinia orci vitae dictum vehicula. Morbi a gravida sapien. Nunc euismod convallis lorem id mollis. Etiam nec ex non magna gravida egestas vitae in mi. Donec vitae laoreet magna, in interdum enim.</p>
        <p>Aliquam vel ligula suscipit, gravida arcu ut, laoreet lectus. Nam et condimentum enim. Nulla facilisi. Nam quis mauris in ex cursus blandit. Aliquam id ipsum sit amet lorem aliquet interdum vitae in risus. Praesent lacus libero, sollicitudin eu commodo non, tristique vel leo. Suspendisse elementum quis nunc ac lobortis. Suspendisse hendrerit sapien eu quam pharetra imperdiet. Maecenas ut dui eu augue accumsan tempus. Sed sagittis lectus pretium, posuere diam vel, pharetra lorem. Vivamus sollicitudin dui sit amet nulla maximus molestie. Praesent tincidunt ac est in hendrerit. Sed maximus massa vel arcu vehicula vestibulum. Sed at justo nulla. Aliquam erat volutpat.</p>
    </div>
    <div class="content"> <a class="js-toggle-short-content" href="#">Toggle short content</a>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis sollicitudin tellus. Aenean maximus gravida ante vel iaculis. Praesent quis enim risus. Donec quis quam ac augue malesuada aliquet. Sed bibendum mi ac vehicula viverra. Morbi egestas ipsum est, ut lacinia justo rhoncus quis. Nam vitae rutrum diam, id tempus massa. Donec massa erat, varius non lacinia quis, ultrices dignissim orci. Nunc ut nisl maximus, tincidunt ligula id, congue massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ut nisi mi. Vestibulum malesuada egestas magna eu pretium....

CSS

html, body {
    padding: 0;
    margin: 0;
}
.wrapper {
    width: 100%;
}
.sidebar {
    width: 180px;
    padding: 0 10px;
    float: left;
    background: #aaffaa;
    position: relative;
    top: 0;
}
.content {
    margin: 0 0 0 220px;
}

JavaScript

var $sidebar = $('.sidebar'),
    $window = $(window),
    previousScroll = 0;
$window.on('scroll', function (e) {
    if ($window.scrollTop() - previousScroll > 0) {
        $sidebar.css({
            'top': Math.max($window.scrollTop() + $window.height() - $sidebar.outerHeight(true), parseInt($sidebar.css('top'))) + 'px'
        });
    } else {
        $sidebar.css({
            'top': Math.min($window.scrollTop(), parseInt($sidebar.css('top'))) + 'px'
        });
    }
    previousScroll = $window.scrollTop();
});

// Just to test scrolling when sidebar is longer than content
$('.js-toggle-short-content').on('click', function () {
    $('.content').find('p:not(:first)').toggle();
    return false;
});