JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="wrapper group">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod arcu ut diam maximus auctor. Sed malesuada maximus tellus, dignissim volutpat urna hendrerit at. Cras nisi turpis, mattis vitae ornare ut, bibendum et massa. Nulla at tellus a arcu luctus ultrices ac non felis. Maecenas euismod efficitur ipsum vel vestibulum. Nam imperdiet ipsum nunc, sit amet varius felis maximus quis. Etiam efficitur, mauris placerat luctus facilisis, ligula sem pellentesque nunc, ac viverra tellus velit sit amet purus. Proin a nunc id quam tempor blandit vitae id orci. Cras lectus turpis, varius nec elementum venenatis, suscipit ut nisl.</p>
        <p>Nulla condimentum est in leo mollis, sit amet varius erat pulvinar. Donec posuere turpis non est ultrices lobortis. Donec commodo aliquam sodales. Ut id finibus velit. Aenean tempus eget nulla at condimentum. Ut a arcu quis dui ultricies efficitur. Vestibulum suscipit diam ullamcorper velit tempor, in ullamcorper odio sollicitudin. Vestibulum congue nisl nibh, ut elementum quam tristique non. Nulla in sollicitudin dolor. Morbi ac justo nulla. Suspendisse massa neque, vestibulum id dolor non, congue rhoncus nibh.</p>
        <p>Phasellus porta tellus vel ipsum vehicula, nec fermentum lectus porta. Aenean viverra magna eu risus lacinia malesuada. Sed molestie auctor pharetra. Aliquam erat volutpat. Vestibulum in mi a orci tincidunt pellentesque. Sed et lectus eros. Nam imperdiet neque eu dolor gravida, interdum pellentesque justo rhoncus. Morbi tincidunt, ex nec pellentesque pulvinar, dui nulla tempor ipsum, sed consequat est tortor at neque. Suspendisse sed consequat urna. Nullam luctus, sem convallis volutpat mollis, sapien odio finibus elit, vitae fringilla enim leo sed velit. Vivamus fringilla ante laoreet blandit porta. Sed condimentum ut erat nec...

CSS

/* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/* https://css-tricks.com/snippets/css/clear-fix/ */
.group:after { content: ""; display: table; clear: both; }

body { font: 15px/20px sans-serif; color: #444; }
p { margin-bottom: 30px; }

.wrapper { width: 100%; max-width: 700px; padding: 3%; }

.content, .sidebar { float: left; }

.content { width: 68%; margin-right: 5%; }

.sidebar { width: 27%; }

.box { background: #eee; border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; }

JavaScript

(function($) {
    var element = $('.follow-scroll'),
        originalY = element.offset().top;
    
    // Space between element and top of screen (when scrolling)
    var topMargin = 20;
    
    // Should probably be set in CSS; but here just for emphasis
    element.css('position', 'relative');
    
    $(window).on('scroll', function(event) {
        var scrollTop = $(window).scrollTop();
        
        element.stop(false, false).animate({
            top: scrollTop < originalY
                    ? 0
                    : scrollTop - originalY + topMargin
        }, 300);
    });
})(jQuery);