JSFiddle - React, Tailwind, and code Playground

by AlienWebguy

HTML

<div id="header1" class="header fixed">
    <h2>Header1</h2>
</div>
<div id="header1_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor luctus sem et varius. In blandit massa nec risus aliquam in ornare purus blandit. Etiam auctor erat a tortor commodo rhoncus eleifend in est. Aliquam sed tincidunt felis. Integer tristique turpis sit amet nunc consectetur iaculis. Proin velit orci, luctus vel varius ac, bibendum eget elit. Duis mollis orci a augue porttitor suscipit. Fusce ornare nisi sit amet purus congue volutpat. In nec ligula urna, eget ultricies tortor. Cras quis metus id nibh tempor sagittis a nec sem. Aliquam tincidunt dui sit amet sapien vehicula sit amet volutpat arcu consectetur. Fusce fringilla diam eget turpis porta non adipiscing urna viverra. Fusce neque justo, blandit in volutpat sed, pretium non dolor. Integer turpis lectus, euismod at pharetra suscipit, molestie porta justo. Vivamus pellentesque aliquam tellus, vitae laoreet nunc laoreet quis. Duis vel justo tellus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor luctus sem et varius. In blandit massa nec risus aliquam in ornare purus blandit. Etiam auctor erat a tortor commodo rhoncus eleifend in est. Aliquam sed tincidunt felis. Integer tristique turpis sit amet nunc consectetur iaculis. Proin velit orci, luctus vel varius ac, bibendum eget elit. Duis mollis orci a augue porttitor suscipit. Fusce ornare nisi sit amet purus congue volutpat. In nec ligula urna, eget ultricies tortor. Cras quis metus id nibh tempor sagittis a nec sem. Aliquam tincidunt dui sit amet sapien vehicula sit amet volutpat arcu consectetur. Fusce fringilla diam eget turpis porta non adipiscing urna viverra. Fusce neque justo, blandit in volutpat sed, pretium non dolor. Integer turpis lectus, euismod at pharetra suscipit, molestie porta justo. Vivamus pellentesque aliquam tellus, vitae laoreet nunc laoreet quis. Duis vel justo tellus.</p>
</div>


<div...

CSS

p {
    background-color:#F0F0F0;
}

.header {
    background-color:#CCC;
    width:100%;
    top:0;
    left:0;
}

.header h2 {
    margin:20px;
}

.fixed {
    position:fixed;
}

.relative {
    position:static;
}

#header1_content {
    margin-top:80px;
}

JavaScript

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