JSFiddle - React, Tailwind, and code Playground

by hari1_prasad

HTML

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div class="container relparentwrap" style="width: 960px; height: 400px; position: relative; overflow:auto;">
		<div class="aLotOfContent" style="width: 100%; background:red;padding:20px 0;">
			<div style="height:400px; background:green"></div>
			<div style="height:500px; background:yellow"></div>
			<div style="height:500px; background:purple"></div>
		</div>
		<div class="buttons needToBeFixed" style="position:absolute; left:0; right:0; border:solid 1px #fff;">Helllo</div>
	</div>

CSS

body{margin:0;}

JavaScript

$(function() {
		var p = $(".relparentwrap").offset();
		var tPos = (p.top + $(".relparentwrap").outerHeight()) - $(".needToBeFixed").outerHeight();
		vPos=tPos;
		$(".needToBeFixed").css("top",tPos);
		$(".relparentwrap").scroll(function() {
			tPos = vPos + $(".relparentwrap").scrollTop();
			console.log(tPos);
			$(".needToBeFixed").css("top",tPos);
		});
		
	});