I have been trying to make a function in jQuery to let a div move up faster than the rest of the page when you scroll down, and have it do the same for the opposite direction.
This works, but with a 1.5 second cooldown to avoid the spam from $(window).scroll(function(). So people have to wait 1.5 seconds when they join the site for it to work and then they have to wait 1.5 seconds to scroll up and down each time to see the effect work perfectly.
How would I go around fixing this delay? There should be no delay for good user experience. (The transition function is from a library and is not at fault here.)
var $intervalReady = false;
setInterval(function(){if($intervalReady==false){
$intervalReady = true;
}}, 1500);
$( document ).ready(function() {
var $elementBeginPos = $('#headertext').position();
$(window).scroll(function(){
var top = $(this).scrollTop();
if(top > 60 && $intervalReady==true){
$('#headertext').transition({y:'30%'});
$intervalReady = false;
}
else if(top < 60 && $intervalReady==true){
$('#headertext').transition({y:'-30%'});
$intervalReady = false;
}
});
});
Here is a working example: https://jsfiddle.net/37khp0ft/ Adjust to your needs.
In general, update the state on timer event, not on the scroll event.
JS part:
function updatePos(selector, multiplier)
{
var scrollPos = $(document).scrollTop();
$(selector).css({top: scrollPos * multiplier});
}
$(document).ready(function()
{
setInterval(updatePos, 100,'#div', -1.1 );
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments