如何計算可見的高度？

Question

我有一個像以下模型的HTML頁面，

當用戶正在滾動頁面時，如何計算＃page1的可見部分的高度？

------------------------------------------------------- 
#heder (position: fixed; height: 100px, z-index: 10) 
------------------------------------------------------- 

        visible zone 

____________________________________________________ 
|             | 
|     #page1 (visible)    | 
|             | 
| (position: static; height: 1000px, z-Index: 0) | 
|             | 
------------------------------------------------------- 
#footer (position: fixed; height: 50px, z-index: 10) 
------------------------------------------------------- 
|             | 
|             | 
|             | 
|             | 
|     #page1 (invisible)    | 
|             | 
|             | 
|             | 
|             | 
____________________________________________________ 
|             | 
|             | 
|             | 
|     #page2 (invisible)    | 
|             | 
| (position: static; height: 700px, z-Index: 0) | 
|             | 
|             | 
|             | 
|             | 
|             | 
____________________________________________________ 

Answer 1

您可以通過在jQuery的使用window.top得到最窗口的高度。 window.top的高度將獲得瀏覽器窗口或其內部的iframe的高度。

$(window.top).height();