Firefox，位置固定，滚动条答案

【问题标题】：Firefox, position fixed, scroll barFirefox，位置固定，滚动条
【发布时间】：2013-05-20 08:16:54
【问题描述】：

在这个例子中，如果我将 div 设置为红色，它会向右移动一个奇怪的动作。我认为问题只出在 Firefox 上，div 是对的，有一个滚动条和位置固定。

（如果我使用绝对位置，我会解决移动问题。但如果用户滚动，div 会移动，它应该“固定”到右下角）

火狐
对
滚动条
固定位置

HTML：

<div id="blue"></div>
<div id="red"></div>

CSS：

#red {
    position: fixed; /* fixed genera el problema */ 
    bottom: 20px; right:25px;
    width:80px; height:50px;
    cursor:pointer; 
    background:red;
}

#blue {
    margin:0 auto;
    width:80px; height:500px;
    background:blue;
}

JQUERY：

$(function(){   
    $("#red").click(function() {
        $("#red").animate({bottom:'-80px'},1000);
    }); 
})

图 1：原始位置
图 2：当有人点击时，它会向右移动，然后向下移动。它应该只向下移动

【问题讨论】：

您能否提供问题发生的屏幕截图以及您希望它如何表现？正如我在 FireFox、IE10 和 chrome 中检查的那样，但所有三个版本都获得了相同的 Div red 行为，这使得它在点击时掉落。
当您单击红色时，它会向右移动，然后向下移动。（我认为它补偿了滚动条）它应该向下移动，而不是向右移动。我在 Firefox 20.0 中检查它。（我认为是最后一个）。现在，我看到在旧的 Firefox 3.6 中不会发生这种情况。

标签： jquery css fixed

【解决方案1】：

似乎找到了解决方法，将固定框的位置更改为绝对位置并将其放入另一个固定位置 div 中： CSS fixed position movement under scrollbar in Firefox

此外，关于这个问题还有一个未解决的错误：CSS position fixed no longer factors in scrollbar after hover

更新：找到了更好的解决方法，使用 min-width 而不是 width 作为固定框：https://stackoverflow.com/a/15705522/980692

【讨论】：

两种解决方案都非常好。我不明白为什么最小宽度，但它的工作原理！谢谢你

【解决方案2】：

http://jsfiddle.net/CGkEU/2/

试试这个 jsfiddle

.background{
    position:static;
}

【讨论】：

有效！但我不明白为什么。请解释一下好吗？
因为您的 div 位于它自己的 html 页面上，而不是容器“背景”上。更改大小的页面将获得垂直滚动条，然后推动您的 div。在静态容器中，滚动条不会影响 div。相对容器会随着滚动条移动
这可能会帮助您更好地理解它 - w3schools.com/css/css_positioning.asp 我目前正在阅读一本关于 HTML5 和 CSS3 的书并完成了关于定位的部分，我理解它，但如果我的解释不够好然后点击链接，干杯
@Nrc，看来 sander 对原始代码做了 2 处改动，他添加了上面的 CSS，还添加了一个 JS 行，点击时将红色 div 位置从固定更改为绝对，从我已经测试过，解决问题的是 JS 而不是 CSS。但是它产生了一个新的问题：如果你向下滚动然后点击红色然后你注意到红色框从固定位置到绝对位置的变化，它会跳起来。所以总而言之，问题似乎没有解决。
如果有滚动条（因为屏幕小于#blue）然后你点击#red 然后它会跳转。这一定是 Firefox 中的一个错误，@benkol 的 2 个选项解决了这个问题。无论如何，您的解决方案非常接近。谢谢。

【解决方案3】：

这就是你要找的吗？

Demo

.background{
    position:relative;
}

$(function(){       
    $("#red").click(function() {
        $("#red").animate({bottom:'15px'},1000);
        $("#red").css({"position":"absolute","right":"15px"});
    });     
})

【讨论】：

在您的演示中，红色跳跃。我认为绝对位置将红色置于与固定位置不同的位置。它们是不等价的
使屏幕小于#blue，你会看到它跳动