3

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

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

向下移动滚动条。然后你可以看到.fixed DIV 在 FF 中运行顺畅，但在 Safari 和 Webkit 中运行不顺畅。

我不知道我该如何解决它。任何帮助表示赞赏:)

我在 mac 中使用 Chrome 版本 22.0.1229.94。

4

4 回答 4

2

您只是在元素上使用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现在再次使用，垂直滚动非常流畅。

于 2012-11-08T11:04:28.597 回答
1

我建议一个替代方案。赋予平滑效果的最有利的选择是动画位置变化，假装缓动。

像这样的东西

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

演示

于 2012-11-05T04:13:22.517 回答
1

在固定的 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>

​</p>

js：

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

...

​jsfiddle 示例

于 2012-11-06T18:16:03.670 回答
0

在您的情况下，要将您的 div 固定在页面的固定位置，您需要使用 CSS 位置fixed而不是absolute

你的滚动事件可以被删除，你的 CSS 应该是这样的：

.fixed {
    padding:20px;
    border:1px solid #ccc;
    position:fixed;
    top:0;
    left:0;
}​

这是更新的小提琴：http: //jsfiddle.net/Hbkdt/17/

于 2012-11-05T05:36:05.083 回答