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);
    });
});

Demo

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!