JSFiddle - React, Tailwind, and code Playground

by _jro

HTML

<div id="wrapper" >
    <div class="placeholder"></div>
    <div class="fixedheader" id="head1">Header 1</div>
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim enim. Praesent id est vitae nulla accumsan blandit sit amet ut eros. Suspendisse eu ante purus, nec rhoncus nunc. Curabitur sagittis interdum scelerisque. Fusce condimentum tortor eros. Curabitur et purus in nulla consequat aliquet varius in lectus. Sed blandit purus semper sapien dignissim porta. Morbi vitae mauris mauris. Proin quis nulla ac lorem pretium ornare. Donec blandit sem et libero bibendum quis tristique elit viverra. Vivamus sed velit odio. Cras fermentum orci quis odio suscipit dapibus. Sed mollis lectus quis elit facilisis semper. Quisque ut lacus vel elit vulputate eleifend. Duis quis eros nibh.

Nunc bibendum nulla viverra lorem facilisis eget tincidunt elit laoreet. Quisque velit quam, cursus nec tempus et, sollicitudin dapibus felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur laoreet turpis semper enim commodo quis dapibus lectus viverra. Praesent commodo, augue vitae cursus mattis, mauris risus elementum sem, at blandit eros velit id lorem. Etiam laoreet euismod lacinia. Pellentesque nec hendrerit leo. Donec bibendum hendrerit nunc eget varius. Praesent pharetra lobortis molestie. Morbi ac quam eget purus luctus commodo et ut massa. Sed in nunc purus, id luctus mauris. Fusce elementum, enim nec tempor lobortis, mi libero bibendum nulla, eget placerat elit justo a ligula.

Nam interdum odio eu nisi eleifend rutrum. Proin semper consectetur sapien, non suscipit elit convallis eget. Aenean porta ante et nisl tristique et luctus odio suscipit. Fusce leo nibh, tempor et auctor et, pharetra sed ante. Nam ornare aliquet condimentum. In ut tellus nisl. Nullam et turpis non nisi pharetra venenatis non pulvinar nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos...

CSS

.placeholeder{display:hidden}
*{
    padding:0;
    margin:0;
}
#wrapper{
    width:500px;
    
    padding:20px;
}

.fixedheader{
    text-align:center;
    font-weight:bold;
    font-size:30px;
    height:40px;
    width:500px;
}
#head1{
    background: -moz-linear-gradient(top,  #FF0D0D,  #F08484);
    background: -webkit-gradient(linear, left top, left bottom, from(#FF0D0D), to(#F08484));

}
#head2{
    background: -moz-linear-gradient(top,  #C6FF54,  #91C230);
    background: -webkit-gradient(linear, left top, left bottom, from(#C6FF54), to(#91C230));
        

}
#head3{
    background: -moz-linear-gradient(top,  #162BC7,  #6B7CFA);
    background: -webkit-gradient(linear, left top, left bottom, from(#162BC7), to(#6B7CFA));
        

}

JavaScript

window.onscroll=function(){
    window.stackHeads();
};
window.stackHeads=function(){
    fixedHeads=document.getElementsByClassName('fixedheader');
    for(i=0;i<fixedHeads.length;i++){
        header=fixedHeads[i];
        nextheader=fixedHeads[i+1];
        holder=getPrevNext(header)[0];  
        if(window.pageYOffset>findPosY(holder)){
            //if our scroll position in the window is father than the placeholder of the current header's position in the DOM...
            if(typeof nextheader!='undefined'){
                //If this isn't the last header.
                dif=findPosY(nextheader)-window.pageYOffset;
                //the diference between our scroll position and the header's placeholder's position
                if(dif<header.offsetHeight){
                    //if we have less distance between the placeholder of the next element and the top of of the page than the height of the current header, we push the header up so it doesn't overlap. 
                    header.style.position="fixed";
                    header.style.top='-'+(header.offsetHeight-dif)+'px';
                    
                }
                else{
                    //if there is another header, but we have room
                    //console.log(header
                    holder.style.height=header.offsetHeight+'px';
                    header.style.position="fixed";
                    header.style.top="0px";
                }
                
            }
             
            else{
                                    
                holder.style.height=header.offsetHeight+'px';
                //if there isn't another header
                header.style.position="fixed";
                header.style.top="0px";
            }
           
            
        }
        else{
            holder.style.height='0px';
            //if we haven't gotten to the header yet
            header.style.position='static';
            header.style.removeProperty('top');
   ...