Как настроить появление баннера при прокрутке страницы до определенной высоты?

Как настроить отображение баннера таким образом, чтобы он становился видимым при прокрутке до 1000px и исчезал при прокрутке ниже этой точки? <br/> <a href="https://codepen.io/ellabustova/pen/MWRZYJx" rel="nofollow">Пример - баннер</a>
  • 21 апреля 2024 г. 22:10
Ответы на вопрос 2
Для настройки появления и исчезновения баннера при прокрутке страницы до определенной высоты, можно использовать JavaScript. 

Пример кода для этого:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Появление баннера при прокрутке</title>
<style>
    #banner {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #333;
        color: #fff;
        padding: 10px;
        text-align: center;
    }
</style>
</head>
<body>
<div id="banner">Это баннер</div>
<div style="height: 2000px;">Содержимое страницы</div>

<script>
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 1000) {
            document.getElementById("banner").style.display = "block";
        } else {
            document.getElementById("banner").style.display = "none";
        }
    }
</script>
</body>
</html>
```

В данном примере баннер будет появляться при прокрутке страницы до высоты 1000px и исчезать при прокрутке ниже этой точки. 
Просто вставьте этот код в ваш HTML файл и измените содержимое баннера по вашему усмотрению.
Как вариант: 
Похожие вопросы