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

91
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;
});

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

READ ALSO
Простой ajax на select
HTML

Простой ajax на select

Есть код

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

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

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

 101
Cannot read property 'classList' of undefined
HTML

Cannot read property 'classList' of undefined

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

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

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

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

 136