JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div class="green"></div>

<div id="post-7790">
  <div class="sticky-calendar">Sticky</div>
</div>

<div class="red"></div>

CSS

.sticky-calendar {
  width: 200px;
  background-color: yellow;
  text-align: center;
  top: 0;
}

.green {
  background-color: green;
  height: 200px;
}

#post-7790 {
  background-color: blue;
  height: 500px;
}

.red {
  background-color: red;
  height: 800px;
}

JavaScript

jQuery(document).ready(function() {
  var stickyTop = $('.sticky-calendar').offset().top;

  $(window).scroll(function() {
    var windowTop = $(window).scrollTop();
    if (stickyTop < windowTop && $("#post-7790").height() + $("#post-7790").offset().top - $(".sticky-calendar").height() > windowTop) {
      $('.sticky-calendar').css('display', 'block');
    } else {
      $('.sticky-calendar').css('display', 'none');
    }
  });
});