JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="sticky-calendar"></div>

<div class="hero-header"></div>

<div class="site-content"></div>

CSS

.sticky-calendar {
position: fixed;
top: 100%;
right: 0px;
background: #000;
color: white;
height: 100%;
max-width: 294px;
min-width: 294px;
overflow-x: hidden;
padding: 250px 0px 20px 20px;
  
}

.hero-header {
  height: 250px;
  background-color: blue;
}

.site-content {
  height: 1500px;
  background-color: IndianRed;
}

JavaScript

var articleTop = $('.site-content').offset().top;

$(window).on('scroll', function() {
  if ($(window).scrollTop() >= articleTop) {
    $('.sticky-calendar').css("top", "0");
  } else {
    $('.sticky-calendar').css("top", "-1000%");
  }
});