scrolltop()在chrome & safari中工作不顺利，但是在firefox中工作。

Question

如果您检查这个链接http://jsfiddle.net/Hbkdt/。

$(window).scroll(function() {
       $(".fixed").css("top", $(window).scrollTop() + "px");
    });

把你的滚筒往下挪。然后，您可以看到.fixed DIV在FF中运行得很顺利，但是在Safari & Webkit中工作并不顺利。

我不知道怎样才能修好它。如有任何帮助，我们将不胜感激:)

我在mac上使用的是Chrome 22.0.1229.94版。

Answer 1

您只使用position: absolute并在元素上设置scrollTop，因为当使用position: fixed时，如果窗口宽度小于元素的宽度，则元素的一部分将被隐藏，即使您向右滚动试图查看它：

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

解决这个问题的另一种方法是坚持使用position: fixed，然后解决元素的一部分被隐藏的问题：

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

元素的left属性在滚动集上的方式使水平滚动看起来按需要工作：

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

由于position: fixed现在再次被使用，垂直滚动是完全平滑的。

Answer 2

我是在建议另一种选择。给出平滑效果的最有利的选择是推动位置的改变，假装宽松。

就像这样

$(window).scroll(function(){
    $(".fixed").stop(false, true).animate({ "top" : $(window).scrollTop()}, 1000); 
});

演示

这很好，但是当你用滚动窗格开始滚动时，它又开始结结巴巴了。

但是，为了克服这一问题，您可以使用脱脂技术。

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

演示

Answer 3

在固定的div中添加一个相对div，并在调整大小时调整其宽度。

<div class="fixed">
    <div class="container">
         <ul>
            <li>Resize frame</li>
            <li>Test1</li>
            <li>Test1</li>
            <li>Test1</li>
        </ul>
        <div class="victim">Why i am not visible</div>
    </div>
</div>

​

联署材料：

jQuery(document).ready(function($) {
    var fitWidth = function() {
        $(".fixed .container").width(Math.min(
            $(window).width(), $(".fixed").width()
        ));
    };

    $(window).resize(fitWidth);
    fitWidth();
});​

css：

.fixed {
    border:1px solid #ccc;
    position:fixed;
    top:0;
    left:0;
    width:1000px;
    background:red;
}

.container {
    background: #ff0;
    position: relative;
}

...

​小提琴手例子