Для того чтобы реализовать закрытие поп-ап окна при прокрутке страницы, вам понадобится JavaScript код. Вот пошаговая инструкция, объясняющая, как это сделать:
1. Первым шагом добавьте код JavaScript, который будет отслеживать событие прокрутки страницы. Для этого вы можете использовать следующий код:
window.addEventListener('scroll', function() {
// Ваш код для закрытия поп-ап окна
});
2. Далее вам нужно определить элемент, который является поп-ап окном и задать ему уникальный идентификатор (ID) с помощью атрибута "id". Например:
<div id="popup"> <!-- Ваш поп-ап контент --> </div>
3. После этого добавьте код JavaScript для закрытия поп-ап окна в обработчик события прокрутки страницы. Ниже представлен пример кода, который скрывает поп-ап окно при прокрутке:
window.addEventListener('scroll', function() {
var popup = document.getElementById('popup');
popup.style.display = 'none';
});
Обратите внимание, что я задал значение "none" для свойства "display". Вы можете использовать другую логику для определения, когда именно скрывать поп-ап, например, основываясь на позиции прокрутки или времени.
4. Наконец, убедитесь, что этот JavaScript код размещен после HTML кода поп-ап окна в вашем файле HTML или в подключенном скрипте в случае, если вы используете отдельный JavaScript файл.
Вот пример полного кода:
<!DOCTYPE html>
<html>
<head>
<title>Закрытие поп-ап окна при прокрутке</title>
<style>
#popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: #ccc;
display: block;
}
</style>
</head>
<body>
<div id="popup"> <!-- Ваш поп-ап контент --> </div>
<script>
window.addEventListener('scroll', function() {
var popup = document.getElementById('popup');
popup.style.display = 'none';
});
</script>
</body>
</html>
При прокрутке страницы поп-ап окно будет автоматически скрываться.
Надеюсь, что эта информация будет полезной для вас! Если у вас есть дополнительные вопросы, не стесняйтесь задавать.