0

Имеется блок <header> и при скролле, когда <header> уже не видно, нужно сделать его фиксированным, чтобы его было постоянно видно.

Я решил это так.

Код JS:

$(window).scroll(function() {
    var scroll = $(this).scrollTop(),
        $bottom = $('.bottom');
    if( !$bottom.hasClass('fix') && scroll > 50 ){
        $bottom.addClass('fix');
    }else if( $bottom.hasClass('fix') && scroll <= 50) {
        $bottom.removeClass('fix');
    }
})

Но меня интересует следующее в этом JS-коде:

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

13
  • Проблема "частого отстрела" решается использованием throttle/debounce , (например, готовый плагин для этого github.com/cowboy/jquery-throttle-debounce , либо можете написать своё ) , т.е. перед каждым запуском функции в обработчике идет проверка, не запускалась ли она недавно. Если запускалась, то повторно функция не запускается.
    – br3t
    1 июн 2017 в 20:53
  • @br3t, как делать эту проверку? т.е. запускалась ли недавно функция
    – word
    1 июн 2017 в 21:15
  • Написали же либу использовать
    – Alex78191
    1 июн 2017 в 21:40
  • я ведь не спрашивал , какой нужен плагин для этого. хотелось бы узнать, как это реализовать самому, в плагине может быть много лишнего
    – word
    1 июн 2017 в 21:48
  • Ничего там лишнего. Что за ерунду говоришь? Это в jQuery много лишнего, но сейчаc не времена dial-ap. А в этом плагине к jQuery Только две функции. github.com/cowboy/jquery-throttle-debounce/blob/master/…
    – Alex78191
    2 июн 2017 в 13:08

1 ответ 1

1

let callBack = function() {
    $(this).off("scroll", callBack);
    var scroll = $(this).scrollTop(),
        $bottom = $('.bottom');
    if( !$bottom.hasClass('fix') && scroll > 50 ){
        $bottom.addClass('fix');
    }else if( $bottom.hasClass('fix') && scroll <= 50) {
        $bottom.removeClass('fix');
    }
    setTimeout(()=>$(this).scroll(callBack),30);

    console.log(scroll)
}

$(window).scroll(callBack)
body {
  height: 1000px
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2
  • ,кстати этот код не всегда срабатывает, т.е. если допустим нужно сделать шапку фиксированной при скроле, то шапка не всегда фиксируется, особенно если скролить очень быстро
    – word
    18 фев 2018 в 10:09
  • @word можно уменьшить таймер setTimeout. в сниппете работает как надо.
    – webDev_
    21 фев 2018 в 7:51

Ваш ответ

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

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