Znalazłem gotowca:
<div class="container">
<div class="text text-1">
Lorem ipsum <span></span>
</div>
<div class="text text-2">
Lorem ipsum <span></span>
</div>
</div>
$red:#f20;
.container{
height:100rem;
.text{
text-align:center;
font-size:1.5rem;
&.text-1{
margin-top:5rem;
}
&.text-2{
margin-top:50rem;
}
span{
color:$red;
}
}
}
$(window).scroll(function(){
$('.text').each(function(){
if(isScrolledIntoView($(this))){
$(this).children('span').text('visible');
}
else{
$(this).children('span').text('invisible');
}
});
});
function isScrolledIntoView(elem){
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
Źródło: https://codepen.io/pedrodj46/pen/BKBOaJ