Как скрыть элемент на время скролла страницы?

104

22 января 2021, 19:10

Хочу скрывать блок пока пользователь находится в процессе пролистывания страницы и показывать его через пару секунд после остановки.

$(window).on('scroll', function(){
    var icons = $('.hot-icons');
    icons.css('display', 'none');
    setTimeout(function(){icons.css('display', 'block')}, 2000);
});

В принципе это работает, но не совсем так как надо, потому что при настоящем листании страницы событие scroll происходит много раз. И блок то появляется, то исчезает, в общем, полная неразбериха. Как можно сделать это по-нормальному?

Answer 1

let timer_id,
    w8 = false;
$(window).on('scroll', () => {
    let icons = $('.hot-icons');
    if (w8) {
        clearTimeout(timer_id);
        w8 = false;
    }
    icons.css('display', 'none');
    timer_id = setTimeout(() => {
        icons.css('display', 'block');
    }, 2000);
    w8 = true;
});

я бы наверное так сделал, еще можно накрутить логику чтобы само событие скролла срабатывала не каждый раз, а поставить троттл на полсекунды хотяб)

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Простой ajax на select

Есть код

169

HTML

Из-за подключения jquery перестаёт работать плагин с fl.ru

Вот пример jsfiddlenet/4ohx07ez/1/

113

HTML

Cannot read property 'classList' of undefined

Использую код для слайдера! Слайдер работает, но на других страница в консоле ошибка (Cannot read property 'classList' of undefined), помогите пожалуйста исправить

109

Как, используя wpf mvvm, нарисовать таблицу

Зашла в тупикМне нужно при нажатии кнопки нарисовать такую таблицу:

147