使用jquery检查视口中是否可以看到div

我正在尝试使用jquery来检查Div RED是否在视口内，如果没有，则检查Div ORANGE是否在视口中。 如果只有一个IF语句，我正在使用的函数很有用，但是当我添加另一个IF ELSE语句时，它不会工作。

这是function：

$.fn.isOnScreen = function(){ var win = $(window); var viewport = { top : win.scrollTop(), left : win.scrollLeft() }; viewport.right = viewport.left + win.width(); viewport.bottom = viewport.top + win.height(); var bounds = this.offset(); bounds.right = bounds.left + this.outerWidth(); bounds.bottom = bounds.top + this.outerHeight(); return (!(viewport.right  bounds.right || viewport.bottom  bounds.bottom)); }; 

这是我添加的代码，用于检查div红色或div橙色是否在视口内

 $(window).scroll(function() { if ($('.red').isOnScreen() === true) { $('.red').remove(); } else if ($('.orange').isOnScreen() === true) { $('.orange').remove(); } }); 

这是一个jfiddle http://jsfiddle.net/wN7ah/453/

Answer 1

以下是工作版本： http ： //jsfiddle.net/wN7ah/455/

做魔术的function：

 $.fn.isOnScreen = function(){ var win = $(window); var viewport = { top : win.scrollTop(), left : win.scrollLeft() }; viewport.right = viewport.left + win.width(); viewport.bottom = viewport.top + win.height(); var bounds = this.offset(); bounds.right = bounds.left + this.outerWidth(); bounds.bottom = bounds.top + this.outerHeight(); return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); }; 

用法：

 $(window).scroll(function() { if ($('.orange').isOnScreen() == true) { //alert("removing orange"); $('.orange').remove(); } if ($('.red').isOnScreen() == true) { //alert("removing red"); $('.red').remove(); } }); 

如果屏幕上出现任何橙色或红色，则会将其删除。

如果要检查何时删除，请在删除之前添加警报： http ： //jsfiddle.net/wN7ah/457/