JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"></div>
<div id="main">
    <div id="content"></div>
    <div id="side-bar">
        <div class="static">NÃO SE MEXE</div>
        <div class="testing">ESTE SE MEXE - EFEITO ELÁSTICO</div>
    </div>
</div>
<div id="footer"></div>

CSS

#header {
    position: relative;
    background: gainsboro;
    height: 100px;
    width: 500px;
}
#main {
    position: relative;
    width: 500px;
    height: 2000px;
    margin: 0 auto;
    display: table;
}
#main #content {
    position: relative;
    width: 350px;
    height: 2000px;
    float: left;
    margin: 10px 0 !important;
    background: green;
}
#main #side-bar {
    position: relative;
    float: right;
    width: 140px;
    height: 2000px;
    margin-top: 10px;
}
#main #side-bar .static {
    position: relative;
    float: left;
    width: 100%;
    background: #a5b8ff;
    height: 1000px;
    margin-bottom: 15px;
}
#main #side-bar .testing {
    position: relative;
    float: left;
    width: 100%;
    background: #ffd1a5;
    height: 100px;
}
#footer {
    position: relative;
    height: 400px;
    width: 500px;
    background: gainsboro;
    margin-top: 10px;
}

JavaScript

var $j = jQuery.noConflict();
$j(document).ready(function() {
    var animationCompleted = false;
    var posicaoFooter = $j('#footer').offset().top;
    var posicaoFinalContent = $j('#content').position().top + $j('#content').outerHeight(
        true);
    var sidebarDiv = $j('.testing');
    $j(window).bind('scroll', function() {
        var scroll = $j(this).scrollTop();
        if (scroll + sidebarDiv.height() >= posicaoFooter) {
            sidebarDiv.css({
                position: 'absolute',
                top: posicaoFinalContent - sidebarDiv.height()
            })
            return;
        } else if (animationCompleted) {
            sidebarDiv.css("position", "fixed").css('top', '0')
        }
        if (scroll > 1150 && !animationCompleted) {
            sidebarDiv.css("position", "fixed").css('top', '0')
                .animate({
                    marginTop: '-40px'
                }, 100, function() {
                    sidebarDiv.animate({
                        marginTop: '20px'
                    }, 125).animate({
                        marginTop: '0px'
                    }, 150).animate({
                        marginTop: '10px'
                    }, 175);
                })
            animationCompleted = true
        } else if (scroll < 1156 && animationCompleted) {
            animationCompleted = false;
            sidebarDiv.css("position", "relative").stop().animate({
                marginTop: '-30px'
            }, 150).animate({
                marginTop: '15px'
            }, 150).animate({
                marginTop: '-7px'
            }, 150).animate({
                marginTop: '3px'
            }, 150).animate({
                marginTop: '0px'
            }, 150);
        }
    });
});