jQuery的：当一个div是在浏览器窗口中可见的通知

Question

我已经通知控制台日志每当给定格在浏览器窗口中的脚本，它是不是很漂亮，但在这里它是：

$(window).bind('scroll', function(){ 
    var $canvas = $('div#example'); 
    var pos  = $canvas.offset(); 
    var total = pos.top + $($canvas).height(); 
    var wndtop = $(this).scrollTop(); 

    if(wndtop <= pos || wndtop >= total){ 
     console.log("off screen") 
    } 
    if(wndtop >= pos || wndtop <= total){ 
     console.log("on screen") 
    } 

}); 

如果#div位于页面顶部，此脚本可以正常工作，但如果它不在页面顶部，它将始终返回“屏幕上”。我怎么能修改这个，以便它会返回正确的信息，无论div在哪里？

Answer 1

http://www.jsfiddle.net/Q7T3b/

我猜我认为这将是一个很酷的小运动。
正常情况下，我会用某种方法（如低，高）扩展本机号对象;

但是，这似乎正在工作...虽然它没有超出“看起来不错”的测试; & &很脏。所以不要告诉任何人我做到了。

var canvas = $('#other'); 
var win = $(window); 

win.bind('scroll', function(){ 
    var pos = canvas.offset(); 
    var total = pos.top + canvas.height() + win.height(); 
    win.top = win.scrollTop(); 
    var d = win.height() + win.top; 

    if(pos.top < d && !(total < d)){ 
     console.log("on screen") 
    } 
});​ 

当你在一个密集的活动，如“滚动”或“鼠标移动”运行功能，你需要确保以往任何时候都运行的是哪个在那里尽可能灵活。 DOM查询是任何事情，但速度很快，而且它们的开销很大。我建议避免查询此类事件。