JSFiddle - React, Tailwind, and code Playground

by Manna

HTML

<div class="demo">
    <div class="coupon_header scrollable">Title</div>
    <div class="coupon_header" id="coupon_header_hidden">Title</div>
    <div class="content"></div>
</div>

CSS

div.demo {
    background: #ccc none repeat scroll 0 0;
    border: 3px solid #666;
    margin: 5px;
    padding: 5px;
    position: relative;
    width: 500px;
    height: 500px;
    overflow: auto;
  }
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    width: 1000px;
    height: 1000px;
  }

.coupon_header {
  position: relative;
  padding: 6px 15px;
  background-color: #f0f0f0;
  margin-top: 5px;
  line-height: 2em;
  border: 1px solid #d5d5d5;
  width: 450px;
}

#coupon_header_hidden {
  position: fixed;
  top: 15px;
  display: none;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  z-index: 100;
  width: 450px;
}

.content {
    height: 2000px;
}

JavaScript

$(document).ready(function() {
  var fixed_header = $('#coupon_header_hidden');
  var fixed_header_primary = $('.scrollable');
  if (fixed_header) {
    $('.demo').scroll(function(e){
      _that = $(this);
      $(".scrollable").each(function(el) {
        var $el = $(this);
        if (_that.scrollTop() > $el.offset().top){
          fixed_header.show();
          fixed_header_primary.hide();
        } else if (_that.scrollTop() <= $el.offset().top) {
          fixed_header.hide();
          fixed_header_primary.show();
        }
      });
    });
  }
});