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.