Медленная реакция с событием прокрутки

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

но не работает. Иногда это занимает две секунды, прежде чем что-то произойдет. Особенно, когда я прокручиваю назад и достигаю вершины. Есть ли способ улучшить этот код для лучшей производительности?

// Scroll show menu 
$(window).scroll(function(){ 
    scrollPosition = $(this).scrollTop(); 

    if (scrollPosition >= 150) { 
     $("header").animate({ 
      height: '65px' 
     }); 
    } 

    if (scrollPosition <= 100) { 
     $("header").animate({ 
      height: '130px' 
     }); 
    } 
});

источник

2015-06-27 3D-kreativ

лучше использовать Css для анимации, при использовании анимации() его используемый javascript, не так эффективен ... – Proxytype

где «использование css для анимации» означает использование инструкции «переход» внутри правил CSS. – arkascha

@Proxytype Хорошо, не могли бы вы ответить на какой-нибудь простой код? –

Проблема в том, что в scroll пожаров событий один раз для каждого пикселя, который прокручивают. Поэтому, если вы прокручиваете 500 пикселей, вы добавляете 350 анимаций в очередь.

Чтобы предотвратить это, вы можете использовать stop(), чтобы очистить все существующие анимации в очереди. Попробуйте это:

$(window).scroll(function(){ 
    scrollPosition = $(this).scrollTop(); 

    if (scrollPosition >= 150) { 
     $("header").stop().animate({ 
      height: '65px' 
     }); 
    } 

    if (scrollPosition <= 100) { 
     $("header").stop().animate({ 
      height: '130px' 
     }); 
    } 
});

Example fiddle

уборщик решение, как это было предложено @Proxytype является использование CSS переходы и addClass и removeClass с JQuery:

header { 
    height: 130px; 
    transition: height 0.3s; 
} 
header.small { 
    height: 65px; 
}

$(window).scroll(function(){ 
    scrollPosition = $(this).scrollTop(); 
    $("header")[scrollPosition >= 150 ? 'addClass' : 'removeClass']('small'); 
});

Последние линия вышеперечисленного представляет собой сжатую версию этой логики:

if (scrollPosition >= 150) { 
    $('#header').addClass('small'); 
} 
else { 
    $('#header').removeClass('small'); 
}

Example fiddle

источник

2015-06-27 12:43:39

Спасибо, но когда я добавил .stop, ничего не случилось с анимацией! Что может быть неправильным? –

Это странно. Как вы можете видеть из примера скрипки, он должен работать. Попробуйте CSS-метод, хотя он более краткий и лучше разделяет проблемы. –

Альтернатива CSS выглядит красиво в скрипке. Но я не уверен, что следую и понимаю третью строку в части jQuery. Это [], я раньше не видел их внутри jQuery. Это какой-то вид на тройном операторе? Могло ли быть упрощено? Пожалуйста, объясни! :) –

лучше использовать CSS3 является более эффективным, то JavaScript, для exmaple:

$('#dd').css("transition-duration", 0.2 + "s"); 
$('#dd').css("-webkit-transition-duration", 0.2 + "s"); 
$('#dd').css("transform", "translate3d(" + 30 + "px,0,0)");

http://jsfiddle.net/6c2mhuwd/

источник

2015-06-27 12:51:07 Proxytype

Спасибо за код –

Медленная реакция с событием прокрутки

ответ

Смежные вопросы