JSFiddle - React, Tailwind, and code Playground

by redbmk

HTML

<nav>Welcome to my world!</nav>
<div id="report">
    <div class="header"><div class="header-inner">Hello, World!</div></div>
    <div class="body"></div>
    <div class="header"><div class="header-inner">¡Hola, Mundo!</div></div>
    <div class="body"></div>
    <div class="header"><div class="header-inner">Ciao, Mondo!</div></div>
    <div class="body"></div>
</div>

CSS

#report {
    position:absolute;
    top:30px;
    height:90%;
    width:98%;
    overflow-y:auto;
}
#report div {
    clear: both;
    float:left;
}

.header,
.header-inner {
    width: 200px;
    height:20px;
    font-size: 20;
    font-weight: bold;
    background-color:white;
}

nav {
    position: absolute;
}

.frozen {
    position: fixed;
    top: 30px;
}

JavaScript

for (var i = 20; i > 0; i--) {
    $('.body').after('<div>Item ' + i + '</div>');
}

$('.header, .header-inner').each(function () { $(this).css('z-index', $(this).parent().offset().top) });

$('#report').scroll(function () {
    $('.header-inner').each(function () {
        var winTop = $(window).scrollTop(),
            viewTop = $('#report').offset().top,
            headTop = $(this).parent().offset().top,
            headHeight = $(this).height();
        
        if ((winTop + viewTop) >= (headTop - headHeight)) {
            $(this).css({
                position: 'fixed',
                top: (winTop + viewTop >= headTop ? viewTop : headTop) + 'px'
            });
        } else {
            $(this).css({
                position: '',
                top:      ''
            });
        }
    });
}).scroll();