Пытаюсь изменять прозрачность элемента при скролле:
Когда появляется элемент, изменяем его прозрачность от 0 до 1 по мере прокрутки
Когда элемент начинает "уходить" из области видимости, изменяем его прозрачность от 1 до 0 по мере прокрутки
function changeOpacity(){
var windowScrollTop = $(window).scrollTop(),
docHeight = $(document).height(),
windowHeight = $(window).height(),
elOffset = $('.shab1').offset().top,
elHeight = $('.shab1').outerHeight(),
opacity = 1 - (windowScrollTop - elOffset + elHeight) / elHeight,
opacity2 = 1 + (windowScrollTop - elOffset + elHeight) / elHeight;
if(opacity > 1) opacity = 1;
if(opacity2 > 1) opacity2 = 1;
if(opacity <= 0) opacity = 0;
if(opacity2 <= 0) opacity2 = 0;
if(windowScrollTop + windowHeight > (elOffset - elHeight) / elHeight){
$('.shab1').css('opacity', opacity);
}
}
changeOpacity();
$(window).on('scroll', function(){
changeOpacity();
});
body{min-height:3000px;background:#000}
.shab1{background:red;text-align: center;padding:60px 0;opacity:0;}
.elem{width:100%;height:40px;text-align:center;font-size:30px;margin:0 0 90%;}
.elem1{background:green}
.elem2{background:blue}
.elem3{background:purple}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="elem elem1">не тот блок</div>
<div class="elem elem2">не тот блок</div>
<h1 class="elem shab1">Stackoverflow, помоги, пожалуйста</h1>
<div class="elem elem3">не тот блок</div>
</body>
</html>