使用 jQuery 收聽瀏覽器寬度/高度的變化

Question

當頁面准備好時，我有一些 div 設置了絕對位置 (CSS)，並且相對於另一個固定 div 定位，這工作正常。 但是，在頁面加載並設置好所有內容之前，如果調整頁面大小，那些絕對 div 不會跟隨更改，移動到其他位置，我認為它們被賦予了相對於屏幕頂部和左側的值。

我用作定位絕對 div 的起點的相對 div 的位置也可能會改變位置，相對於它上面的那些。

有沒有辦法監聽瀏覽器寬度/高度的變化，以使這些 div 保持在正確的位置？

Answer 1

首先，您要開始將窗口調整大小事件綁定到您選擇的函數。

$(window).on("resize", methodToFixLayout);

現在您可以確定新的高度和寬度並從那里調整頁面。

function methodToFixLayout( e ) {
    var winHeight = $(window).height();
    var winWidth = $(window).width();
    //adjust elements css etc.....
    //$("#someDiv").css('someProperty',someValue based on winHeight and winWidth);
}

如果沒有關於您的布局的更多細節，很難確切地說出您需要哪些更改，但這應該會讓您朝着正確的方向前進。

Answer 2

如果您只需要相對於另一個元素而不是整個文檔來定位您的元素，則可能沒有必要使用 JavaScript。 您可以使用“位置：相對”：

<div id="myContainer" style="position:relative">

    <div id="myElement" style="position:absolute;left:100px;"></div>

</div>

因為 myContainer 有position:relative ，所以 myElement 將絕對定位但相對於 myContainer 而不是相對於整個文檔。 有了這個，您就可以構建非常復雜但強大的位置，這些位置將與瀏覽器大小無關。

Answer 3

jqui 網站上也有這個插件。

http://www.jqui.net/jquery-projects/jquery-mutate-official/

這是演示： http : //www.jqui.net/demo/mutate/

希望能幫助到你。