Kiểm tra xem div có hiển thị trong chế độ xem không bằng cách sử dụng jquery

Question

Tôi đang cố gắng sử dụng jquery để kiểm tra xem Div RED có nằm trong chế độ xem hay không và sau đó kiểm tra xem Div ORANGE có ở chế độ xem hay không. Hàm tôi đang sử dụng hoạt động tốt nếu chỉ có một câu lệnh IF, nhưng khi tôi thêm một câu lệnh IF ELSE khác, nó sẽ không hoạt động.

đây là chức năng:

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

}; 

đây là đoạn code tôi thêm vào kiểm tra và xem div đỏ hoặc div cam nằm trong khung nhìn

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

    } 
}); 

đây là một jfiddle http://jsfiddle.net/wN7ah/453/

Answer 1

Đây là phiên bản đang hoạt động: http://jsfiddle.net/wN7ah/455/

Chức năng này sẽ thực hiện sự kỳ diệu:

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

}; 

Cách sử dụng:

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

}); 

Nếu bất kỳ cam hoặc màu đỏ có mặt ở trên màn hình nó sẽ loại bỏ chúng.

Nếu bạn muốn kiểm tra khi nó được loại bỏ, thêm cảnh báo trước khi tháo: http://jsfiddle.net/wN7ah/457/