JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<html lang="en-US">
<head></head>
<body>
<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...

CSS

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

.fixedheader{
    text-align:center;
    font-weight:bold;
    font-size:30px;
    height: auto;
    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

$(function(){
  $(window).scroll(function(){
    var fixedHeads = $('.fixedheader');
    for(var i = 0, c = fixedHeads.length; i < c; i++){

      var header = $(fixedHeads[i]);
      var next = fixedHeads[i+1] ? $(fixedHeads[i+1]) : undefined;
      var prev = $(header.prev());

      if(window.pageYOffset > prev.offset().top){
        var top = 0;
        if(next){
          top = header.height() - (next.offset().top - window.pageYOffset);
          top = top < 0 ? 0 : -top;
        }
        if(top === 0){
          //if there is another header, but we have room
          prev.css('height', header.height() + 'px');
        }
        header.css({
          position: 'fixed',
          top: top + 'px'
        });
      } else{
        prev.css('height', '0px');
        //if we haven't gotten to the header yet
        header.css({
          position:'static',
          top:''
        });
      }
    }
  });
});