Помогите оптимизировать JS
Сделал меню, которое при скролле вверх должно крепиться к экрану.
Сразу пример: http://jsfiddle.net/8bost17n/
И собственно код:
var $window = $(window);
var $menu = $('.menu-bar');
var lastCur = 1;
var fixHeader = 'fixed-bar';
$window.on('scroll',function(){
var cur = $window.scrollTop();
if(cur<lastCur && cur>80){
$menu.addClass(fixHeader);
} else {
$menu.removeClass(fixHeader);
}
//console.log([cur,lastCur]);
lastCur = cur;
});
Так вот, меня немного "накаляют" следующие строчки:
if(cur<lastCur && cur>80){
$menu.addClass(fixHeader);
} else {
$menu.removeClass(fixHeader);
}
Мне кажется, они просаживают fps страницы, т.к., вероятно, там выполняются некие регулярки и манипуляции с DOM.
Есть идеи, как это оптимизировать? Может, сравнивать при помощи hasClass
? Буду рад хорошим советам. Также интересуют варианты, чтобы оно плавно "выползало" и "заползало" (имею в виду translateY
) с наименьшими потерями производительности.
Спасибо!
Источник: Stack Overflow на русском