JSFiddle - React, Tailwind, and code Playground

by Ayan Dey

HTML

<div id="Layer1"></div>
	<div id="sticky-anchor"></div>
	<div id="Layer2"></div>
	<div id="Layer3"></div>

CSS

#Layer2
	{
   	position: absolute;
  	 text-align: left;
   	left: 0px;
   	top: 276px;
   	width: 950px;
   	height: 57px;
   	z-index: 1;
	}

	.stick
	{
	position:fixed;
	top:0;
	}

JavaScript

jQuery(document).ready(function($){
		$(window).scroll(sticky_relocate);
		sticky_relocate();
	   });

               	  function sticky_relocate(){
		var s=$('#Layer2');
		var pos = s.position();
		
		var window_top = $(window).scrollTop();
		var div_top = $('#sticky-anchor').offset().top;
		
		s.html("Distance from top:" + pos.top + "<br />Scroll position: " + window_top);
		
		if(window_top>div_top){
			s.addClass('stick');
		}
		else{
			s.removeClass();
		}
	   }