Firefox，固定位置，滾動條

在此示例中如果我爲div創建動畫，它會向右移動一個奇怪的動作。我認爲問題只出現在Firefox，div是正確的，有一個滾動條和位置固定。Firefox，固定位置，滾動條

（如果我使用的絕對位置我解決了運動。但如果用戶滾動，在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); 
    }); 
})

Original position After click

圖片1：原始位置
圖2：當有人點擊它時，會右移然後移下。它應該只向下移動

來源

2013-05-20 Nrc

你能提供問題發生的截圖以及你希望它的行爲？正如我檢查了FireFox，IE10和Chrome，但所有這三個版本都獲得相同的行爲的紅色，這是使其下降點擊。 – Nitesh

當你點擊紅色時，它會向右移動然後下降。（我認爲它補償了滾動條）它應該下降，而不會向右移動。我在Firefox 20.0中查看它。（我認爲最後一個）。現在，我看到在一箇舊的Firefox 3.6中沒有發生。 – Nrc

它看起來像一個解決方法被發現，固定框的位置改變到絕對的，把它裏面的另一個固定位置的div： CSS fixed position movement under scrollbar in Firefox

而且，有一個開放的bug上這個問題：CSS position fixed no longer factors in scrollbar after hover

UPDATE：找到了一個更好的解決方法，使用min-width而不是widt h爲固定的盒子：https://stackoverflow.com/a/15705522/980692

來源

2013-06-06 12:00:11 benkol

這兩種解決方案都非常好。我不明白爲什麼最小寬度，但它的作品！謝謝你 – Nrc

@Nrc謝謝http://memedad.com/meme/31211 – benkol

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

試試這個的jsfiddle

.background{ 
    position:static; 
}

來源

2013-05-20 08:27:30 shammelburg

這似乎工作@Nrc – shammelburg

它的工作原理！但我不明白爲什麼。你能解釋一下嗎？ – Nrc

因爲你的div在html頁面上它自己而不是容器的「背景」。當改變大小的頁面將得到垂直滾動條，然後推動你的div。在靜態容器中，滾動條不會影響div。相對容器將隨滾動條移動 – shammelburg

這是你在找什麼？

Demo

.background{ 
    position:relative; 
} 

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

來源

2013-05-20 09:45:18

在您的演示中，紅色跳躍。我認爲絕對的位置將紅色放在與固定位置不同的位置。他們是沒有等效 – Nrc

檢查此.. http://jsfiddle.net/CGkEU/3/ –

使屏幕小於#blue，你會看到它跳躍 – Nrc

Firefox，固定位置，滾動條

回答

相關問題