JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bar">
    <div id="about">Планета, и это следует подчеркнуть, выбирает космический математический горизонт (датировка приведена по Петавиусу, Цеху, Хайсу). Зоркость наблюдателя вращает экваториальный часовой угол, данное соглашение было заключено на 2-й международной конференции "Земля из космоса - наиболее эффективные решения". Конечно, нельзя не принять во внимание тот факт, что зенитное часовое число дает афелий (расчет Тарутия затмения точен - 23 хояка 1 г. II О. = 24.06.-771). Южный Треугольник ничтожно выслеживает аргумент перигелия – север вверху, восток слева.</div>
    <div id="warning" data-behavior="sticky">
        Я предупреждение и я "залипаю" когда меня пытаются "прокрутить"      
    </div>
</div>

CSS

html, #bar {
    height:100%;
}
body {
    height:2000px;
    background:#95a5a6;
}
body {
    margin:0;
    padding:0;    
}
#bar {
    width:300px;
    background:#ecf0f1;
    position:relative !impotant;
}
#about, #warning {
    width:100%;
    margin-bottom:150px;
}
#about {
    min-height:300px;
}
[data-behavior="sticky"]{
    width:300px;
}
[data-behavior="sticky"].bound {
    position:fixed;
    max-width:300px;
    top:0;
}

JavaScript

jQuery.fn.sticky = function(){
    var target = jQuery(this);
    jQuery(target).each(function(){
    jQuery(this)
        .data('initial-offset',jQuery(this).offset().top)
        .on('stickyScroll',function(e,winOffset){
            if((winOffset > jQuery(this).data('initial-offset'))){
                if(!jQuery(this).is('.bound')){
                    jQuery(this).addClass('bound');
                }
            } else if(jQuery(this).hasClass('bound')){
                jQuery(this).removeClass('bound');
            }
        });
    });
    jQuery(window).on('scroll', function(e){ jQuery(target).trigger('stickyScroll',jQuery(window).scrollTop());});
};
jQuery('[data-behavior="sticky"]').sticky();