JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content">
<div class="menu"></div>
<div style="height:1000px;"></div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
div.menu {
height: 50px;
background: #ff0000;
}
div.menu.fixed {
position: absolute;
top: 0;
left: 0;
right: 0;
}
html,body,#content {
height:100%;
}
#content {
background-color: lightblue;
overflow:scroll;
position: relative;
}
JavaScript
function checkScrolling() {
if ($('#content').scrollTop() > 200) {
$('.menu').css('display', 'none');
}
}
$('#content').scroll(function () {
checkScrolling();
});