JSFiddle - React, Tailwind, and code Playground
HTML
// Visible DIV
<div class="firstBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
// Hiddden DIV
<div class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Visible DIV
<div class="secondBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
CSS
.textBlock {
text-align: center;
height: 104px;
width: 100%;
float: left;
display: none;
background:red;
}
.textBlock p {
font-size: 16px;
font-family: arial,helvetica,sans-serif;
padding: 10% 5%;
line-height: 20px;
background:green;
}
JavaScript
$(document).ready(function(){
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 600) {
$(".textBlock").slideDown();
} else {
$(".textBlock").stop().slideUp();
}
});
});