Ching Ching Ching Ching - 7 months ago 40
HTML Question

Javascript set translate with scroll event is slow

i have a problem when setting

transform: translateY();
based on scroll event
value
.

basically,
#moveme
will disappering while scroll event trigger.

check this fiddle out for live action : https://jsfiddle.net/bo6e0wet/1/

here is the code :

HTML

<div id="moveme"></div>


JS

$(window).on("scroll", function() {

var currentScroll = $(this).scrollTop();

if (currentScroll <= 50) {

$("#moveme").css("transform", "translate3d(0," + -currentScroll + "px, 0");

}

});


why did
moveme
not diappering totally? is it because scroll event fires too much, so the DOM did not get it quickly?

i try scrollng very slow, with my touch pad. it's working perfect.

but if i press
CTRL + DOWN ARROW
which mean force to scroll to down of the page.
moveme
stuck.

how to solve this problem?

what's wrong with my code?

thanks in advance...

Answer

Change this condition:

if (currentScroll <= 50)

to something higher, like

if (currentScroll <= 75)

because the currentScroll jumps from 39 to 65, so it misses the 50 point, and only translates -39 Fiddle;