Why, when the floating unit twitches when scrole?

Question

Why, when the floating unit twitches when scrole?

There is a task to implement a floating sidebar that they'd just recorded, but did not animirovannoe...and, of course, that would take into account the height of the footer. I found the following code, but scale the mouse and keyboard unit somehow twitches (if scale the slider in the browser this does not occur) what could be the reason?

$(window).scroll(function() {
/*----------------------------------
 sticky block script by makeasite.ru
----------------------------------*/
 sb_m var = 20; /* indent on top and bottom */
 var mb = 300; /* height of the footer with margin */
 var st = $(window).scrollTop();
 var sb = $(".sticky-block"); // Block wrapper
 var sbi = $(".sticky-block .inner"); // Floating unit
 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});
}
}
});

jQuery

kaitlyn77 asked July 9th 19 at 13:36

More answers about "Why, when the floating unit twitches when scrole?"

1 answer

Rex.Bayer90 answered on · Answer 1 · 2019-07-09T13:38:40.719Z

Because scroll events are triggered more often than the browser time to redraw the block.

The correct way to solve this problem is to switch position of block fixed at the right moments, and on the side JS to calculate only the time shift + to take into account the distance to the footer.

----

What exactly is wrong in your decision: are You too much constantly calculated inside the scroll event, for example triggered every time you scroll again looking for elements: var sb = $(".sticky-block"); jQuery You are using slow-designs that make the extra operations, such as sb.css({"paddingTop" : h}); instead of the more rapid design in pure JS: sb[0].style.paddingTop = h + "px";