JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<div class="container">
    <div id="rightPanelscrl"><p>some content</p></div>
</div>

CSS

.container {height: 2000px;}
#rightPanelscrl {
    position: absolute;
    top: 140px;
    z-index: 4;
    width: 100%;
}
.fixed {
    position: fixed;
    top: 40px;
}

JavaScript

var sidebarScrollTop = 0;

$(window).load(function () {
    sidebarScrollTop = $("#rightPanelscrl").offset();
    if ($("#rightPanelscrl").height() > 500) {
        alert($("#rightPanelscrl").height());
        $(window).scroll(function () {

            var docScrollTop = $('body,html').scrollTop();
            //  alert(docScrollTop);
            if (docScrollTop > 500) {
                $("#rightPanelscrl").css({ position: 'fixed', top: '-500px' });
            }
            else {
                $("#rightPanelscrl").css({ position: 'static' });
            }
        });
    }
    else if ($("#rightPanelscrl").height() < 500) {
        $("#rightPanelscrl").css({ position: 'fixed', top: '35px' });
    }

});

$(window).resize(function () {
    sidebarScrollTop = $("#rightPanelscrl").offset().top;
});

$(document).resize(function () {
    sidebarScrollTop = $("#rightPanelscrl").offset().top;
});