Почему при плавающий блок дергается при скроле?

Question

[Руслан Шадура]

Есть задача реализовать плавающее боковое меню, что бы они просто фиксировалось, а не анимировалось...ну и, естественно, что бы учитывалась высота футера. Нашел следующий код, но при скроле мышкой и клавиатурой блок почему-то дергается (при скроле ползунком в браузере такого не возникает) в чем может быть причина?

$(window).scroll(function() {
	/*----------------------------------
	sticky block script by makeasite.ru
	----------------------------------*/
	var sb_m = 20; /* отступ сверху и снизу */
	var mb = 300; /* высота подвала с запасом */
	var st = $(window).scrollTop();
	var sb = $(".sticky-block"); // Блок обертка
	var sbi = $(".sticky-block .inner"); // Плавающий блок
	var sb_ot = sb.offset().top;
	var sbi_ot = sbi.offset().top;
	var sb_h = sb.height();
 
	if(sb_h + $(document).scrollTop() + sb_m + mb < $(document).height()) {
		if(st > sb_ot) {
			var h = Math.round(st - sb_ot) + sb_m;
			sb.css({"paddingTop" : h});
		}
		else {
			sb.css({"paddingTop" : 0});
		}
	}
});

Comments

[Максим Тимофеев]

Такой же вопрос был 5 минут назад Дергается div блок только в Google Chrome и IE и только при скролле мышью. Почему?

Answer 1

[Денис Инешин]

Потому, события скролла срабатывают чаще, чем браузер успевает перерисовывать блок.

Правильный способ решения такой задачи - переключать position блока на fixed в нужные моменты, а на стороне JS вычислять лишь момент такого переключения + учитывать расстояние до футера.

----

Что конкретно не так в вашем решении: Вы слишком много всего вычисляете постоянно, внутри события скролл, например каждый раз когда срабатывает скролл вы заново ищете элементы: var sb = $(".sticky-block"); Вы используете медленные jQuery-конструкции, которые делают лишние операции, например sb.css({"paddingTop" : h}); вместо более быстрой конструкции на чистом JS: sb[0].style.paddingTop = h + "px";