Как отследить появление и исчезновение элемента с видимой области?

Question

Пытаюсь изменять прозрачность элемента при скролле:

Когда появляется элемент, изменяем его прозрачность от 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>

----jsfiddle-----

Answer 1

Додумался сам, вот код на фидле, если кому-то понадобится, любые правки или советы приветствуются

jsFiddle

 function inViewChangeOpacity(elem){

var windowScrollTop = $(window).scrollTop(),
windowHeight = $(window).outerHeight(),
elOffset = $(elem).offset().top,
elHeight = $(elem).outerHeight(),
elBottom = elOffset + elHeight,
bottom_of_screen = windowScrollTop + windowHeight - 100,
opacity = 1 - (windowScrollTop - elOffset + elHeight) / elHeight,
opacity2 = 1 + (bottom_of_screen - elBottom) / (elHeight / 2) ;

if(opacity >= 1) opacity = 1;
if(opacity2 >= 1) opacity2 = 1;
if(opacity <= 0) opacity = 0;
if(opacity2 <= 0) opacity2 = 0;
    

if(bottom_of_screen - elHeight > elOffset && windowScrollTop < elBottom + elHeight){
$(elem).css('opacity', opacity);
}
else{
$(elem).css('opacity', opacity2);
}
    
    
    
}

inViewChangeOpacity('.test');

$(window).on('scroll resize', function(event){
inViewChangeOpacity('.test');
});

БЛОГ НА HUSL

Как отследить появление и исчезновение элемента с видимой области?

Ответы (1 шт):