Как оптимизировать плавающий блок для сайта, чтобы он не дёргался?

Question

[Алексей Петухов]

Плавающий блок дёргается в конкретных браузерах: эдж, эксплорер, сафари.

Код блока:

<script language="javascript">
  
$(window).scroll(function() {
	
    
	var sb_m = 10; //Отступ с верху
	var mb = 600;  //Остановка блока
	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});
		}
	}
});  

</script>  

<div class="sticky-block">
	<div class="inner">контент</div></div>

Answer 1

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

Вы неправильно спроектировали такую штуку.
Правильный подход - в нужные моменты переключать у блока position: absolute на position: fixed и обратно.

Двигая блок на чистом JS невозможно добиться абсолютной плавности кроссбраузерно.