Why am I getting lag when I use scroll () in jquery?
I am using simple code to display an element when the page is scrolled to a certain point. The code technically works, but it is heavily delayed. I had code console.log
some debug values (scroll position). I found that the if statement didn't run until the scroll stopped (or when I saw the console.log "catch up"):
$(window).scroll(function(){
if($(window).scrollTop() >= 350) {
$('#logo').animate({'opacity':'1'});
} else {
$('#logo').animate({'opacity':'0'});
}
});
here is the jsfiddel: http://jsfiddle.net/nzcxwdmx/1/
You will notice that if you wait long enough the words "logo here" will appear. the further you scroll down to 350, the longer it will take.
+3
source to share
1 answer
you use defaul instade animation time value from it using the time value you want
Sample code
$(window).scroll(function(){
var spos = $(window).scrollTop();
$('#scroll').text(spos);
if(spos >= 350) {
$('#logo').animate({'opacity':'1'},200);
} else {
$('#logo').animate({'opacity':'0'},200);
}
});
0
source to share