检查div是否可以在窗口中查看？

Question

我有一个单页网站,固定导航和使用滚动脚本,非常类似于:http://www.ivanjevremovic.in.rs/live/temptation/single/orange/index-cycle-slider.html

我正在寻找的是一种方法来检查在窗口中可以看到哪些部分,以便在使用浏览器滚动条时在导航器上设置活动状态,任何想法？

Answer 1

以下是您需要的所有变量......

var $myElt       = $('.myElement');      // whatever element you want to check
var $window      = $(window);            // the window jQuery element
var myTop        = $myElt.offset().top;  // the top (y) location of your element
var windowTop    = $window.scrollTop();           // the top of the window
var windowBottom = windowTop + $window.height();  // the bottom of the window

然后确保你的元素在窗口的范围内......

if (myTop > windowTop && myTop < windowBottom) {
    // element is in the window
} else {
    // element is NOT in the window
    // maybe use this to scroll... 
    // $('html, body').animate({scrollTop: myTop}, 300);
}

jQuery参考:

• http://api.jquery.com/offset/
• http://api.jquery.com/height/
• http://api.jquery.com/scrollTop/

Answer 2

请参阅以下延迟加载插件：

http://plugins.jquery.com/files/jquery.lazyload.js__6.txt

以注释“返回项目相对于当前视图的状态”开头的部分检查元素在视口中是否可见。