0

При скроллинге элемент с уникальным идентификатором должен появляться, то исчезать, но если элемент имеет display: none, он должен прекратить и не выдавать ошибок, а так же не появляться. В данном случае , после 1200px div с уникальным идентификатором вновь появляется.

Конечный исход, должен был быть таков, на скролл элемент появляется, на следующий скролл элемент должен исчезнуть и так в цикле.

    // Появление/исчезновение блока ЛАМПОЧКА
    $(window).scroll(function() {
        // Объявление переменной
        var lamp = $('#flashing_light');
            // Проверка существования элемента на странице
            if (lamp.length > 0) {
                // Переменная с функцией fadeToggle и параметром
                lamp.fadeToggle('normal');
            // Иначе
            } else {
                // Переменной задаём css стиль
                lamp.css({
                    display: 'none'
                });
            }
    });
    #flashing_light {
        display:block;
        background-color: #000;
        height: 100px;
        width: 100px;
    }
    
    @media screen and (max-width: 1200px) {
        #flashing_light {
            display: none;
        }
    }
<div id="flashing_light"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1 ответ 1

0

    // Появление/исчезновение блока ЛАМПОЧКА
    var animating = false; // статус анимации
    var lamp = $('#flashing_light'); // объявление переменной
    // Объект окно по событию скролла
    $(window).scroll(function() {
        if(!animating) { // проверка входа анимации
            animating = true; // передача первому событию
            lamp.fadeToggle({ // плавно отображаем, или скрываем элементы <div> в документе
                duration: 800, // продолжительность анимации
                easing: "linear", // скорость анимации
                complete: function () { // callback
                    animating = false; // окончание события
                }
            });
        }
    });
html {
    height: 2000px;
}
#flashing_light {
    background-color: #000;
    height: 94px;
    width: 100px;
    position: absolute;
    bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="flashing_light"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.