I have a html page like the following model,
when user is scrolling the page, how to I calculate the height of visible part of the #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) |
| |
| |
| |
| |
| |
____________________________________________________