JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
menu goes here
</div>

<div id="c1">
<h1>Content 1</h1>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
</div>
<div id="c2">
<h1>Content 2</h1>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
</div>

<div id="c3">
<h1>Content 3</h1>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
</div>

<div id="c4">
<h1>Content 4</h1>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
</div>

CSS

#menu {
 position: fixed; 
 display: none;
}

JavaScript

$(document).ready(function(){

	$(window).scroll(function(){
	 var yPos = $("body").scrollTop();
   var yCheck = $("#c3").position().top;
   if (yPos > yCheck && !$("#menu").is(":visible")) 
   {
   		$("#menu").show();
   }
   if (yPos <= yCheck && $("#menu").is(":visible")) 
   {
   		$("#menu").hide();
   }
	});
});