JSFiddle - React, Tailwind, and code Playground

by Bruno Bronosky

HTML

<body>
        <div class="tableview">
            <div id="header1" class="header">
                <h2>Header 1</h2>
            </div>
            <div id="header1_content">
                <p>
                header1_content1
                </p>
                <p>
                header1_content2
                </p>
                <p>
                header1_content3
                </p>
                <p>
                header1_content4
                </p>
                <p>
                header1_content5
                </p>
                <p>
                header1_content6
                </p>
                <p>
                header1_content7
                </p>
                <p>
                header1_content8
                </p>
                <p>
                header1_content9
                </p>
                <p>
                header1_content10
                </p>
                <p>
                header1_content11
                </p>
                <p>
                header1_content12
                </p>
            </div>


            <div id="header2" class="header">
                <h2>Header 2</h2>
            </div>
            <div id="header2_content">
                <p>
                header2_content1
                </p>
                <p>
                header2_content2
                </p>
                <p>
                header2_content3
                </p>
                <p>
                header2_content4
                </p>
                <p>
                header2_content5
                </p>
                <p>
                header2_content6
                </p>
                <p>
                header2_content7
                </p>
                <p>
                header2_content8
                </p>
                <p>
                header2_content9
                </p>
                <p>
                header2_content10
                </p>
                <p>
         ...

CSS

body {
    font-family:Helvetica,Arial,san-serif;
}

div.tableview {
    background-color:#CCC;
}

.tableview p:nth-child(odd) {
    background-color:#FFF;
}

.tableview p:nth-child(even) {
    background-color:#F0F0F0;
}

.tableview p {
    padding:8px;
    margin:1px 0px 1px 0px;
}

body, .tableview p:last-of-type, .tableview p:first-of-type, .tableview .header h2 {
    margin:0px;
}

.tableview .header {
    background-color:#333;
    color:#FFF;
    width:100%;
    position:relative;

}

.tableview .header h2 {
    padding:8px 4px 8px 4px;
}

.tableview .fixed {
    position:fixed;
    top:0;
    left:0;
}

JavaScript

// From: http://jsfiddle.net/AlienWebguy/mvtP7/1/
$(function(){
    var lastScrollTop = 0;
    // When the first header is given a fixed position, the ixnline content that follows with shift up.
    el = $('.header').first();
    // To over come this: clone it, make it invisible, remove id tags from it and its children, attach it before the original
    el.before(el.clone(false).css({'visibility':'hidden'}).removeAttr("id").find("*").removeAttr("id").end()).addClass('fixed');

    $(window).scroll(function(event){
        var currentScrollTop = $(this).scrollTop();
        $('.header').each(function(){
            if($(this).hasClass('fixed')){
                if (currentScrollTop > lastScrollTop){
                    console.log('scrolling down');
                    var _next_header = $(this).nextUntil('.header').next('.header');
                    if($(_next_header).length > 0){
                        if($('body').scrollTop() > $(_next_header).offset().top){
                            console.log("Bottom of header hit top of next header");
                            $(this).removeClass('fixed');
                            $(_next_header).addClass('fixed');
                        }
                    }
                } else {
                    console.log('scrolling up');
                    var _prev_header = $(this).prevUntil('.header').prev('.header');
                    if($(_prev_header ).length > 0){
                        if($('body').scrollTop() < $('.fixed').next().offset().top-$('.fixed').height()){
                            console.log("Top of header hit bottom of previous content box");
                            $(this).removeClass('fixed');
                            $(_prev_header).addClass('fixed');
                        }
                    }
                }
            }
        }); 
        lastScrollTop = currentScrollTop;
    });
});