使用jquery獲取窗口高度

所以基本上，如果瀏覽器高度小於440px，我想要一個名爲#content的div具有200px的css頂部值。但是，這似乎不起作用。我究竟做錯了什麼？使用jquery獲取窗口高度

var boh = $(window).height(); 
var bohi = parseInt(boh); 
if(bohi < 440) { 
    $("#content").css("top","200px"); 
} else { 
    //this part works, so it's hidden 
}

來源

2012-01-03 Andrew

您正在使用哪種瀏覽器？ – 2012-01-03 20:44:09

'＃content'已經是'position：absolute'還是'relative'？ – 2012-01-03 20:45:19

你需要它工作一次嗎？還是需要聽取高度變化並相應調整？在這種情況下，您可能想要使用CSS **媒體查詢**。 – 2012-01-03 20:46:21

我認爲你需要處理$（window）.resize（）事件或該邏輯只會運行一次。

<script type="text/javascript"> 

$(window).resize(function(){ 
    var bohi = $(window).height(); 
    if(bohi < 440) { 
     $("#content").css("top","200px"); 
    } else { 
     //this part works, so it's hidden 
    }  
}); 

</script>

這裏，似乎可正常工作的的jsfiddle：

http://jsfiddle.net/kNbuy/

注意$(window).height()不需要parseInt()它已經被視爲一個數字。

來源

2012-01-03 21:23:21 rtpHarry

您需要將此代碼放在您的文件準備好處理，像這樣：

<script> 

$(document).ready(function(){ 

var boh = $(window).height(); 
var bohi = parseInt(boh); 
if(bohi < 440) { 
    $("#content").css("top","200px"); 
} else { 
    //this part works, so it's hidden 
} 

}); 

</script>

來源

2012-01-03 20:45:16 Matt

馬特，你能解釋爲什麼這需要在$（document）.ready？我認爲你不應該等待JavaScript執行這個事件。 – 2012-01-03 20:51:19

嗯，對我來說似乎沒有什麼不同。我在這裏上傳了一個減肥版本：http://andrewsuzuki.com/jqtest.html – Andrew 2012-01-03 20:51:39

確定。我想我明白你的問題可能是什麼。

您尚未指定#content元素的'position'屬性。如果您沒有得到您想要的行爲，我建議您嘗試將position:absolute添加到#content的樣式中。

我建議您仔細研究'position'屬性是如何工作的。您可能會對通過更改#content 和它的父元素的位置css屬性所獲得的結果感到驚訝。

此外，您可能需要考慮在用戶調整瀏覽器窗口大小時，讓頁面自動執行一些代碼以自行調整。這可以使用$ .resize（）來處理。

來源

2012-01-03 20:49:57

嗯，這已經是絕對的了。你可以在這裏看到它：http://andrewsuzuki.com/jqtest.html – Andrew 2012-01-03 20:56:11

截至2015年，我建議使用CSS媒體查詢來代替JavaScript。

@media (max-height: 440px) { 

    #content { 
     top: 200px; 
    } 

}

來源

2012-11-05 05:55:32 sheriffderek

使用jquery獲取窗口高度

回答

相關問題