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 = $('#report').scrollTop(),
            viewTop = $('#report').offset().top,
            headTop = $(this).parent().offset().top,
            headHeight = $(this).height();
        $(this).html(winTop + ' ' + viewTop + ' ' + headTop + ' ' + headHeight);
       
        $(this).css({
            position: 'absolute',
            top: winTop > (winTop + headTop - viewTop) ? winTop : winTop + headTop - viewTop
        });
    });
}).scroll();

//430 => headTop + winTop - viewTop