November 5, 2012
scrolltop() is not work smoothly in chrome & safari but work in firefox
Question by sandeep
If you check this link http://jsfiddle.net/Hbkdt/.
$(window).scroll(function() {
$(".fixed").css("top", $(window).scrollTop() + "px");
});
Move your scroller downward. Then you can saw the .fixed DIV work smoothly in FF but it’s not work smoothly in Safari & Webkit.
I don’t know how can i fix it. Any help is appreciated 🙂
I am using Chrome Version 22.0.1229.94 in mac.
Answer by Starx
I am suggesting an alternative. The most favorable option to give to the smooth effect is to animate the change in position, to fake the easing.
Something like this
$(window).scroll(function(){
$(".fixed").stop(false, true).animate({ "top" : $(window).scrollTop()}, 1000);
});
Demo
This works great but when you starting scrolling with the scroll pane it starts stammering again.
But, to overcome this, you can use of debouncing techniques.
$(window).scroll(function(){
$.doTimeout( 'scroll', 250, function(){
// ^ This time prevents the following code to run,
// if another scrolling occurs within this time
// Thus enabling us to give a smooth scroll effect
// Once the user is done scroll
$(".fixed").stop(false, true) //break the queue fast
.animate({ "top" : $(window).scrollTop()}, 200);
});
});