我的頁腳在調整大小時不會停留在瀏覽器窗口的底部

我的頁面底部有一個頁腳元素，可以通過單擊兩個箭頭將其刪除/返回。當我重新調整瀏覽器窗口的大小時，會出現問題，頁腳並不總是粘在頁面的底部，最終會脫離頁面，無法訪問，或者在頁面中間。我在這裏把一個小提琴，但JavaScript的似乎並不在它的工作...我的頁腳在調整大小時不會停留在瀏覽器窗口的底部

http://jsfiddle.net/Za7Lq/

JS：

$(document).ready(function(){ 
    $("#darrow").click(function(){ 
    $("#footer").animate({"top": "+=100px"}, "slow"); 
    $("#uarrow").animate({"top": "-=50px"}, "slow"); 
    $("#darrow").animate({"top": "+=100px"}, "slow"); 
    }); 
}); 

$(document).ready(function(){ 
    $("#uarrow").click(function(){ 
    $("#footer").animate({"top": "-=100px"}, "slow"); 
    $("#uarrow").animate({"top": "+=50px"}, "slow"); 
    $("#darrow").animate({"top": "-=100px"}, "slow"); 
    }); 
});

來源

2014-01-30 Zac.Ledyard

這不是在js小提琴中的動畫。另外，即使我重新調整窗口大小，它仍然是一樣的。 – MJoraid

您可能希望在左側面板中包含'jQuery'庫。否則'$'將不確定。 –

啊，忘了包含jquery庫。它的工作（你知道我的意思）現在。 HTTP：//的jsfiddle。net/Za7Lq/1 /另外，我可以通過使用百分比值來堅持它的底部，但隨着瀏覽器窗口被重新排列，它們會縮放腳部。 –

請看下文中我編輯。你可能不需要我的ALT版本。

所以，而不是動畫顯示/隱藏頁腳的頂級值，而是將頁腳放入包裝器中併爲該包裝器設置高度值的動畫。東西有點像這樣：

HTML：

<div class="footer-wrapper"> 
    <div class="footer"> 
    <p>Stuff in here</p> 
    </div> 
</div>

CSS：

.footer-wrapper { 
    position: fixed; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100px; 
} 

.footer { 
    height: 100px; 
    width: 100%; 
}

JS：

$("#darrow").click(function(){ 
    $("#footer-wrapper").animate({"height": "+=100px"}, "slow"); 
});

然後，您可以絕對位置的箭起飛頁腳，包裝的容器，基於負值（如果你希望它們在頁腳上方），它們將跟蹤高度集裝箱。

這應該堅持到任何瀏覽器的底部（儘管老年人IE沒有承諾）。

編輯：

看到你的工作擺弄之後，我認爲這個問題是你設置使用「底」頁腳的起始位置，但你試圖用「頂」來移動它。如果您想堅持使用您的解決方案，請改爲對底部值進行動畫處理，然後反轉+/-運算符。

來源

2014-01-30 03:11:21 relic

是的，在通過你的解決方法獲得了一半之後，我看到了你的編輯。謝謝您的幫助！你的alt方法也在工作，只是你知道的。 –

我不確定，但是如果你想在文檔的底部或窗口的底部。窗口的

底部

使用絕對定位，但可以通過，我認爲你的其他元素被搞砸了是你的問題窗口

底部

.class { 
position:fixed; 
bottom: 0px; 
}

如果他們都沒有工作

使用javascript查找頁面的底部，並將其與頁腳的高度相減並將其放在javascript中。

來源

2014-01-30 03:12:03 crustycrabbe

我的頁腳在調整大小時不會停留在瀏覽器窗口的底部

回答

相關問題