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

Question

[Сергей Миллер]

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

Когда появляется элемент, изменяем его прозрачность от 0 до 1 по мере прокрутки
Когда элемент начинает "уходить" из области видимости, изменяем его прозрачность от 1 до 0 по мере прокрутки

Answer 1

[Сергей Миллер]

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

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');
});

Answer 2

[Denioo]

Тут описан подробный ответ

Answer 3

[Антон Шаманов]

посмотри разницу между $().height() $().innerHeight() $().outerHeight()