找到div顶部和窗口底部之间的高度

Question

使用jQuery，我如何找到任何div顶部和视口底部之间的高度？

在我的代码中，我需要在滚动时主动找到页脚顶部和窗口底部之间的距离。

任何想法如何做到这一点？

Answer 1

一个简单的方法：

function updateScroll() { 
    // the div whose offset we're measuring: 
    var measure = $('#measure'), 
    // the height of the window: 
     windowHeight = $(window).height(), 
    // the scroll-distance of the window: 
     scrollDistance = $(window).scrollTop(), 
    // how far from the 'top' of the document the div element is: 
     divOffsetTop = measure.offset().top, 
    // scrollDistance + windowHeight gives measures how far from the 'top' 
    // of the document the bottom of the viewport is, subtracting that from 
    // the offset of the div gives the difference. I used Math.Abs() because 
    // I didn't know if you wanted to know *just* how far, or if you 
    // wanted to know if it was 'above' (-difference) or 'below' (+ difference) 
    // the bottom of the viewport: 
     delta = Math.abs(divOffsetTop - (scrollDistance + windowHeight)); 

    // setting the text of the div itself, you may want to put that someplace 
    // else: 
    $('#distance').text(delta + 'px'); 
} 

// binding the function to the scroll event: 
$(window).scroll(updateScroll); 

JS Fiddle demo。

参考文献：

• height()。
• offset()。
• scroll()。
• scrollTop()。
• text()。