$（window）.resize在高度/寬度條件下不能正確觸發功能

Question

我有一個固定位置的全屏圖像庫。容器div的高度是通過jQuery設置的，下一個div（#page）的margin-top等於window.height。

下面是該代碼：

var windowH = $(window).height(); 
var windowW = $(window).width(); 

function marginTop() { 
    var currentH = $(window).height(); 
    $("#page").css("margin-top", currentH +'px'); 
    $("#image-gallery").css("height", currentH +'px'); 
    console.log('mTop fired!'); 
}; 

$(window).resize(function() { 
     var newH = $(window).height();  // Records new windows height after resize 
     var newW = $(window).width(); 
     var maxH = windowH + 90;  // Sets a positive delta of some px 
     var maxW = windowW + 60; 
     var minH = windowH - 90;  // Sets a negative delta of some px 
     var minW = windowW - 60; 
      if(newH > maxH) {   // If the height difference is more than 50px, then set new marginTop for #page 
       marginTop(); 
       console.log('fire for bigger height'); 
      } else if(newH < minH) { 
       marginTop(); 
       console.log('fire for smaller height'); 
      } else if(newW > maxW) { 
       marginTop(); 
       console.log('fire for bigger width'); 
      } else if(newW < minW) { 
       marginTop(); 
       console.log('fire for smaller width'); 
      } 
}); 

我已經分裂狀況在幾個else if語句，因爲它並沒有正常工作，我不得不退房的時候是工作的時候不要。

各種if ... elseif ... elseif ...解決了移動瀏覽器上的一個問題：沒有這個delta，＃image-gallery div會在地址欄出現或消失時更改尺寸，導致調整結果的div的高度。此外，我不想在桌面上的視口中進行小的更改來重繪整個事物。

但它有一些問題，因爲它不能正常工作。特別是：

• marginTop（）被激發僅window.resize較小的高度（從檢查的console.log）
• 在桌面上，如果窗口通過右上邊角按鍵大小，它根本不開火。
• 刪除所有的if-else-if條件，它工作正常，在桌面上在任何情況下（但地址欄仍是移動的問題）

不能搞清楚，代碼似乎對我來說很好，但不適合瀏覽器。漁獲何處？

測試在Firefox和Chrome最新

Answer 1

這裏有一些小問題。你的if語句將永遠達不到寬度比較。首先，在高度爲if else的寬度中，高度始終首先評估，如果調整高度，寬度永遠不會打中。

接下來，您在var windowH = $(window).height();處看到的「當前高度|寬度」從不重置。這意味着，如果用戶顯示的視口（如瀏覽器最小化）爲200：150，則height：width將始終基於200：150進行測量。這會讓使用更大視口的人獲得非常不同的體驗。

另一個問題，通常在窗口大小調整時發現，是您的代碼會觸發多次。這可能會導致重疊命令的主要問題，從而導致雙重反饋。

下面是我將如何處理這個問題和建議重建。

/* \t simple method to get the current window size as an object where h=height && w=width \t */ 
 
function getWindowSize() { 
 
\t return { h: $(window).height(), w: $(window).width() }; 
 
} 
 

 
function doWork(typ, msg) { 
 
\t // \t report msg of change to console 
 
\t console.log(typ == 'h' ? 'HEIGHT:\t' : 'WIDTH:\t', msg); 
 
\t 
 
\t // \t we really only need fire your method if height has changed 
 
\t if (typ == 'h') marginTop(); 
 
\t 
 
\t // \t a change was made, now to reset 
 
\t window.sizeCheck = getWindowSize(); 
 
} 
 

 
// \t your original method 
 
// \t brokered off so it can be used independently 
 
function marginTop() { 
 
\t var currentH = $(window).height(); 
 
\t console.log('currentH', currentH) 
 
\t $("#page").css("margin-top", currentH +'px'); 
 
\t $("#image-gallery, #page").height(currentH); 
 
\t console.log('mTop fired!'); 
 
} 
 

 
/* \t action area for window resize event \t */ 
 
function windowResize() { 
 
\t // \t made my variables short and sweet, 
 
\t // \t sch=sizeCheck, scu=sizeCurrent 
 
\t var sch = window.sizeCheck, \t // \t get previously set size 
 
\t \t scu = getWindowSize(), 
 
\t \t maxH = sch.h + 90, 
 
\t \t minH = sch.h - 90, 
 
\t \t maxW = sch.w + 60, 
 
\t \t minW = sch.w - 60; 
 
\t 
 
\t if (scu.h > maxH) doWork('h', 'View Got <b>Taller</b>'); 
 
\t else if (scu.h < minH) doWork('h', 'View Got <i>shorteR</i>'); 
 
\t 
 
\t // \t for what you want, the following isn't even really nec 
 
\t // \t but i'll leave it in so you can see the work 
 
\t if (scu.w > maxW) doWork('w', 'View Got <b>Wider</b>'); 
 
\t else if (scu.w < minW) doWork('w', 'View Got <i>thinneR</i>'); 
 
} 
 

 
$(function() { 
 
\t // \t ezier to maintain one global variable than to scope 
 
\t // \t shot 2 which could easily be overriden in a latter method, 
 
\t // \t by simple confusion 
 
\t window.sizeCheck = getWindowSize(); 
 
\t 
 
\t // \t call of event to establish correct margin for the page div 
 
\t marginTop() 
 
\t 
 
\t $(window).resize(function(e) { 
 
\t \t // \t this will clear our timer everytime resize is called 
 
\t \t if (this.tmrResize) clearTimeout(this.tmrResize); 
 
\t \t // \t resize is called multiple times per second, 
 
\t \t // \t this helps to seperate the call, 
 
\t \t // \t and ensure a little time gap (1/4 second here) 
 
\t \t this.tmrResize = setTimeout(windowResize, 250); 
 
\t }); 
 
})

html, body { margin: 0; padding: 0; } 
 
#image-gallery { 
 
\t background: blue; 
 
\t color: white; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
} 
 
#page { background: white; color: red; height: 400px; position: relative; z-index: 1; } 
 
p { padding: 3em; text-align: center; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="image-gallery"> 
 
\t <p> 
 
\t \t image Gallery 
 
\t </p> 
 
</div> 
 
<div id="page"> 
 
\t <p> 
 
\t \t next page 
 
\t </p> 
 
</div>

Answer 2

有人經過，然後投票-1到我的問題。我只想知道誰是勇敢的人，甚至沒有發表簡單的評論就可以判斷他人。這種行爲應該被禁止，我們不會對9gag也不是4chan。