scrolltop() is not work smoothly in chrome & safari but work in firefox

Question

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 1

You're only using position: absolute and setting scrollTop on the element because when position: fixed is used, if the window width is less than the width of the element, a portion of the element is then hidden, even if you scroll right to try to see it:

http://jsfiddle.net/Hbkdt/11/

A different way to approach this problem is to stick with position: fixed, and then to remedy the problem of a portion of the element being hidden:

http://jsfiddle.net/thirtydot/Hbkdt/26/

The left property of the element is on scroll set in a way that makes it appear that horizontal scrolling works as desired:

$(window).scroll(function() {
    $(".fixed").css("left", -$(window).scrollLeft() + "px"); 
});

Since position: fixed is now being used again, the vertical scrolling is perfectly smooth.

Answer 2

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