Форум Монетизация сайтов Рекламная Сеть Яндекса

Закрепить рекламный блок в верхней части экрана на несколько секунд

Dambo
На сайте с 19.07.2018
Offline
373
Dambo
561

Сегодня вышел новый пост про лучшие места для блоков РСЯ и там вот такое рекомендуют для блока в верхней части экрана:

Сделать блок заметнее можно, если прописать в коде блока sticky-свойства и закрепить его в верхней части экрана на несколько секунд.

То есть юзер скролит вниз в поисках контента, а реклама на несколько секунд следует за ним.

Но как такое сделать? Почему-то в поиске ничего не нашел про закрепление на несколько секунд. Подскажите правильный код. 

M3
На сайте с 09.02.2022
Offline
91
master32
#1 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Block</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .sticky-block {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            text-align: center;
            position: -webkit-sticky; /* Для Safari */
            position: sticky;
            top: 0;
            z-index: 1000; /* Чтобы блок был поверх другого содержимого */
            display: none; /* Скрываем блок изначально */
        }

        .content {
            height: 2000px; /* Делаем страницу длинной для прокрутки */
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="sticky-block" id="stickyBlock">Я закрепленный блок</div>
    <div class="content">
        <p>Содержимое страницы...</p>
        <p>Прокрутите вниз, чтобы увидеть эффект.</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
    </div>
    <script>
        window.onload = function() {
            const stickyBlock = document.getElementById('stickyBlock');

            // Показываем блок и закрепляем его на 3 секунды
            stickyBlock.style.display = 'block';
            setTimeout(() => {
                stickyBlock.style.display = 'none';
            }, 3000);
        };
    </script>
</body>
</html>
В3
На сайте с 11.04.2013
Offline
92
Владимир312
#2 
<style>
.yandex {
  position: sticky;
  top: 15px;
  z-index; 9999;
}
</style>
<div class="yandex">
// тут рекламный блок
</div>
<script>
setTimeout(function(){
        document.querySelector('.yandex').style.display = 'none';
}, 1000); // время
</script>
Что то типо того ?🤨
Dambo
На сайте с 19.07.2018
Offline
373
Dambo
#3
master32 #:

Работает, но криво, через 3 секунды блок просто пропадает, если не начинать скролить страницу. Нужен костыль, чтобы блок не пропадал без скроливания. 

Dambo
На сайте с 19.07.2018
Offline
373
Dambo
#4
Владимир312 #:
Что то типо того ?🤨

Аналогичный трабл, пропадает без скроливания через секунду. Плюс еще и уходит под текст при скроле.

не хаос
На сайте с 18.10.2021
Offline
76
не хаос
#5
Решили навязывать рекламу. Понравится ли это "зрителям".
OS_ZP_UA
На сайте с 24.04.2018
Offline
88
OS_ZP_UA
#6
Ну так добавьте  window.onscroll чтобы счетчик не начинал отсчитывать 3 секунды, пока юзверь скролить не начнет.
S
На сайте с 20.10.2023
Offline
19
sicow
#7
Напишите запрос для чат gpt и перебирайте варианты, которые предлагает.
M3
На сайте с 09.02.2022
Offline
91
master32
#8
Dambo #:
Работает, но криво, через 3 секунды блок просто пропадает, если не начинать скролить страницу. Нужен костыль, чтобы блок не пропадал без скроливания.  
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Block</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .sticky-block {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            text-align: center;
            position: -webkit-sticky; /* Для Safari */
            position: sticky;
            top: 0;
            z-index: 1000; /* Чтобы блок был поверх другого содержимого */
            display: none; /* Скрываем блок изначально */
        }

        .content {
            height: 2000px; /* Делаем страницу длинной для прокрутки */
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="sticky-block" id="stickyBlock">Я закрепленный блок</div>
    <div class="content">
        <p>Содержимое страницы...</p>
        <p>Прокрутите вниз, чтобы увидеть эффект.</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
    </div>
    <script>
        window.onload = function() {
            const stickyBlock = document.getElementById('stickyBlock');
            let scrollTimeout;

            // Показываем блок при загрузке страницы
            stickyBlock.style.display = 'block';

            // Событие прокрутки
            window.addEventListener('scroll', function() {
                // Если таймер уже установлен, очищаем его
                if (scrollTimeout) {
                    clearTimeout(scrollTimeout);
                }

                // Устанавливаем новый таймер на 3 секунды
                scrollTimeout = setTimeout(() => {
                    stickyBlock.style.display = 'none'; // Скрываем блок через 3 секунды
                }, 3000);
            });
        };
    </script>
</body>
</html>

Dambo
На сайте с 19.07.2018
Offline
373
Dambo
#9
master32 #:

Теперь другой глюк, блок не пропадает через 3 сек, а так и идет дальше вниз со скролом. 

Оптимизация плавающих фреймов для Ускорение загрузки шрифтов на Emoji в SEO, или

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий