blackseabreathe
@blackseabreathe
brackets

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

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

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

  • Вопрос задан
  • 66 просмотров
Решения вопроса 1
blackseabreathe
@blackseabreathe Автор вопроса
brackets
Додумался сам, вот код на фидле, если кому-то понадобится, любые правки или советы приветствуются



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');
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@Denioo
Тут описан подробный ответ
Ответ написан
Комментировать
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
посмотри разницу между $().height() $().innerHeight() $().outerHeight()
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы