Question

我有一个脚本，只要给定的div在浏览器窗口中，就会通知控制台日志，它不是很漂亮，但在这里是：

$(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/

我想我认为这是一个很酷的小练习通常我会使用某种方法扩展Native Number对象，例如withinRange（low，high）;

但这似乎有效......虽然它没有超出“看起来足够好”的测试; ＆安培;＆安培;这个不干净。所以不要告诉任何人我做到了。

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")
   }
});

当您在诸如“Scroll”或“Mousemove”之类的密集事件上运行功能时，您需要确保在那里运行的内容尽可能灵活。 DOM查询是快速的，它们带来了很大的开销。我建议避免对此类事件进行查询。

jQuery：在浏览器窗口中显示div何时可见的通知

1 个答案: