Как вызвать модальное окно при скроллинге до нужного блока?

Question

[Иван Медведев]

Привет! На странице есть блок с id="popup", а также есть модальное окно с формой и id="exampleModal". Как сделать так, чтобы это окно открывалось, как только пользователь докрутит страницу до блока с id="popup"?

Comments

[WapSter]

Через событие скоро сверяешь текущую высоту с высотой до искомого блока от начала документа и если больше добавляй нужный класс к примеру

[Иван Медведев]

WapSter, а если высота время от времени меняется. Это витрина и там периодически меняется кол-во товаров, соответственно и высота меняется.

[WapSter]

Иван Медведев, при определенном событии же она меняется, привязывай высоту к этому событию.

Answer 1

[Вадим]

В зависимости от необходимой браузернйо поддержки у вас 2 варианта.

1 - более универсальный, но больше работы руками:
При загрузке документа находить в дереве ваш элемент с id=popup. Сохранить в переменную.
Добавлять обработчик скрола на документ и сверять текущий скролл и позицию элемента сверху от начала документа(тык и тык). Совпадает - вызываем модалку.

2 - более современный, но браузер сделает всё за вас:
Воспользоваться Intersection Observer
Суть ,в целом, та же. Указываете за каким элементом следить, указываете что следить нужно за появлением этого элемента во вьюпорте и указываете функцию обработчик этого события, в которой открываете модалку.

Вот пример кода на Intersection observer

var options = {
    root: null, // Не указываем = следим за областью вьюпорта.
    rootMargin: '0px', // отступы вокруг root
    threshold: 1.0
}
var callback = function(entries, observer) { 
    // Открываем модалку
};
var observer = new IntersectionObserver(callback, options);

/* Параметр threshold со значением 1.0 означает что функция будет вызвана при 100% пересечении объекта (за которым мы следим) с объектом root */


var target = document.querySelector('#popup'); // элемент, за которым будем следить.
observer.observe(target);

Профит