檢查div是否在視口內使用jquery

Question

我試圖用jquery來檢查Div RED是否在視口內，如果沒有，那麼檢查Div ORANGE是否在視口中。如果只有一個IF語句，我使用的函數效果很好，但是當我添加另一個IF ELSE語句時，它將無法工作。

這裏是功能：

$.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)); 

}; 

這裏是我加入到檢查，看看是否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/

函數，它的神奇：

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