jQuery - 如何检测项目当前是否在视口之外？

Question

我正在构建一个将使用ajax更新主要内容区域的页面。用户将点击左侧菜单栏中的项目，使用搜索结果更新右侧的div。

我想检测用户是否向下滚动导致右侧结果div移到视口外 - 但是有人检测到了吗？

Answer 1

没有测试/跨浏览器保证/示例代码，但请查看$elem.offset().top与$(document).scrollTop() - 可能是您的解决方案。

您可能需要元素的.height()和window。

freenode上的#jQuery中的Brodingo只是将我链接到可以简化它的Viewport Selectors plugin。

Answer 2

我在以下方面取得了一些成功，其中一个位于视口之外的this_element（在其边界之上或之下）触发了你的行动：

function scroll_to(this_element){
    var banner_height = 145;
    var window_height = $(window).height();
    var scroll_position = $(window).scrollTop();
    var element_position = $(this_element).position().top;
    var element_height = $(this_element).height();
    if(((banner_height + element_position) < scroll_position) || ((scroll_position + window_height) < (banner_height + element_position + element_height))){
        //YOUR ACTION        
    }
}