jquery - 如何确定项目现在是否可见/在窗口中/在折叠下方

Question

使用jquery，确定元素是否位于折叠下方(意味着它不在窗口中且对用户不可见)的最佳方法是什么？

谢谢

Answer 1

我假设您指的是它是否已滚动到 View 之外。

如果是这样，请尝试以下操作:

if( $(window).scrollTop() + $(window).height() > $('#my_el').offset().top ) {
    // element is in view
}

示例: http://jsfiddle.net/8x4Zd/

(单击结果面板来测试目标元素是否在 View 中。然后向下滚动并重复。)

如果您想确保整个元素都在 View 中，请将其.height()添加到方程中。

示例: http://jsfiddle.net/8x4Zd/1/

var win = $(window);
var el = $('#my_el');
var winPos = win.scrollTop() + win.height();
var elPos = el.offset().top + el.height();

if( winPos > elPos ) {
    // element is in view
}