Как отслеживать «касание» элементов на странице?

Question

[fajiz]

Пример можно увидеть сдесь, слева панель лайков. Когда страница прокручивается снизу вверх и появляется на горизонте картинка во весь экран - эта панель исчезает. https://rantt.com/heres-every-moment-that-shaped-t...

Как добавлять класс на такое событие? Что отслеживать?
Интересует как это в ванильном JS либо готовая библа для Vue.
jQuery и тд не надо.

Answer 1

[Александр Фёдорцев]

В вашем примере не «касание» отслеживается, а изменение window.scrollY - растёт margin-top: -100%, уменьшается margin-top: 100%.

... как это в ванильном JS...

Если знаете основы JS, сами можете написать ).

Comments

[fajiz]

Не думаю, т.к. при изменении размеров экрана все работает по прежнему, а тогда пиксели изменяются, поэтому нету смысла отслеживать window.scrollY.

Откуда вы взяли что window.scrollY?

[fajiz]

Если бы просто положение скролла в пикселях - я бы тему не создавал. Тут не window.scrollY

[fajiz]

Кроме того, на разных страницах этого сайта разные размеры картинок. КАРТИНОК НЕСКОЛЬКО. В этой же статье есть вторая, третья, четвертая картинка. Ну блин, какой window.scrollY

[fajiz]

При чем тут margin-top я вообще молчу.

[Александр Фёдорцев]

fajiz: Мотаем туда, где много текста. Нажимаем стрелку в низ (или Page Down например)... Эффект сохраняется! => window.scrollY.

ри чем тут margin-top ...

да хоть hidden="true", я про принцип...

[Александр Фёдорцев]

Конкретно в примере, скрипт изменяет:

visibility: hidden;
transform: translateY(-100%);

А запускать его проще, отслеживая изменения window.scrollY. Можно, конечно и координаты получать... Но к чему такой велосипед? Доказать, что реализуем, можно. Но в вашем примере, не он...

[fajiz]

Александр Фёдорцев: при чем тут стрелка вниз? Как вы предлагаете отлеживать изменения window.scrollY? Абсолютные значения скролла в пикселях?

[Александр Фёдорцев]

var scrll=window.scrollY;
function scroll(){
	if(scrll<window.scrollY){
		document.querySelector('div.d_cont').style='visibility: hidden;';
		scrll=window.scrollY; console.log(scrll, document.querySelector('div.d_cont').style.visibility);
	}
	if(scrll>window.scrollY){
		document.querySelector('div.d_cont').style='visibility: visible;';
		scrll=window.scrollY; console.log(scrll, document.querySelector('div.d_cont').style.visibility);
	}
	return setTimeout(scroll, 50);
}
scroll();

Вот, играйтесь...

[fajiz]

Александр Фёдорцев: попробую, спс