Как сделать закрытьие поп апа при скролле?

Question

[vittallyyaaa]

У меня есть поп апа релизованный через, как сделать закрытие при скролле?

Answer 1

[Дмитрий Максимов]

Не очень понятна цель вопроса и то, каким именно образом происходит закрытие попапа.
Пусть тогда попап закрывается с помощью функции, например, popupClose().

window.addEventListener('scroll', function() {
    popupClose();
});

upd:

function closePopup(selector) {
    const popup = document.querySelector(selector);
    popup.classList.add('hidden');
}

window.addEventListener('scroll', function() {
    closePopup('#open-pop');
});

Comments

[vittallyyaaa]

Поп ап написан на css с помощью #

[vittallyyaaa]

то есть #open-pop к примеру

[Дмитрий Максимов]

Всё равно не очень понятно, как именно происходит отображение попапа и его скрытие.

Ну допустим, что для скрытия попапа к нему нужно добавить css-класс 'hidden'.
Тогда задача будет решаться следующим образом:

function closePopup(selector) {
    const popup = document.querySelector(selector);
    popup.classList.add('hidden');
}

window.addEventListener('scroll', function() {
    closePopup('#open-pop');
});

[vittallyyaaa]

Немного поменял, работает, спасибо, у меня еще вопрос, я сделал через classList сделал текст при нажатии синим, у меня есть еще кнопка, как сделать так чтобы при нажатии на нее текст текст возвращался к изначальному цвету?

[Дмитрий Максимов]

vittallyyaaa, удалить добавленный класс можно с помощью метода remove().

button.classList.remove('class');

Чтобы это происходило при нажатии на кнопке должно висеть событие клика.

const button = document.querySelector('#button');
button.addEventListener('click', function () {
    button.classList.remove('class');
});

или, если нужно переключать цвет по клику:

const button = document.querySelector('#button');
button.addEventListener('click', function () {
    if (button.classList.contains('class')) {
        button.classList.remove('class');
    } else {
        button.classList.add('class');
    }
});

либо через toggle:

const button = document.querySelector('#button');
button.addEventListener('click', function () {
    button.classList.toggle('class');
});