Почему дергается блок при добавлении position:fixed при скроллинге?

Question

[Алексей Скляров]

$(window).scroll(function() {
    $('.portfolio-categories').each(function(){
    var imagePos = $(this).offset().top;
    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow) {
            $(".portfolio-categories").addClass('fixedPortfolio');
        } else   if (imagePos > topOfWindow) {
          $(".portfolio-categories").removeClass('fixedPortfolio');
        }
    });
});

Собственно, если мы докрутили до блока и листаем дальше,он становится фиксированным и едет за пользователем, если же скроллим наверх, то блок отменяет фиксацию, когда достигает своего первоначального положения. Но беда в том, что при скроллинге вообще, этот блок все время непонятно дергается, в чем может быть причина?

Comments

[Николай]

В хроме или других браузерах тоже?

[Алексей Скляров]

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

[MrTimon]

Алексей Скляров: Ну если проблема только в том, что скрит добавляет класс, то этого можно избежать можно избежать если проверять на наличие класса или брать только те .portfolio-categories которые не имеют класса fixedPortfolio. К тому же у вас этот скрипт проходит для каждой категории а клас ставиться для всех - это будет верно только в том случае если у вас все категории на одном уровне, только в этом случае не понятно почему вы запускаете скрипт для каждой из них.

Если переосмыслить то что я сказал и посчитать что все имиджи на одном уровне то тогда можно сделать так

$(window).scroll(function() {
     var imagePos = $('.portfolio-categories').first().offset().top;
    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow) {
            $(".portfolio-categories").not('.fixedPortfolio').addClass('fixedPortfolio');
        } else   if (imagePos > topOfWindow) {
          $(".portfolio-categories.fixedPortfolio").removeClass('fixedPortfolio');
        }

});

Answer 1

[axeax]

$('.portfolio-categories').each
много у вас блоков с классом portfolio-categories? Если много, то естественно пока each их все обойдет, будут тормоза.