使用jQuery訪問div時觸發事件？

Question

功能： 我想在用戶看到某個div（向下滾動到某個項目）時更改某個項目的類別。

我現在該怎麼做：我使用這個好的電影劇本（http://code.google.com/p/jquery-appear/）至極的作品真的很好，當一個div變得對用戶可見的只是觸發一個事件的jQuery。但它只會觸發一次。所以，如果你向下滾動頁面的jquery得到罰款。但是，如果我滾動然後再下來，它會發生火災。這是我的jquery：

$('#myDiv').appear(function() { 
     $("#aDiv").addClass("active"); 
}); 

我想做的事：使腳本執行每次「myDiv」出現，不僅是第一個。

有沒有人有關於我如何做到這一點的想法？

Answer 1

判斷DIV可見或不可見，您可以：

$(window).scroll(function(event) { 
    console.log($(".target").offset().top < $(window).scrollTop() + $(window).outerHeight()); 
}); 

所以，我不認爲你需要任何插件。

只是表達判斷它像：

if($(".target").offset().top < $(window).scrollTop() + $(window).outerHeight()) { 
    // something when the .target div visible 
} else { 
    // something when the .target div invisible 
} 

Answer 2

我使用了類似的插件，但此使用的綁定的方法和使用事件 - >http://remysharp.com/2009/01/26/element-in-view-event-plugin/

示例用法：

$('div').bind('inview', function (event, visible) { 
    if (visible == true) { 
    // element is now visible in the viewport 
    } else { 
    // element has gone out of viewport 
    } 
}); 

Answer 3

通過查看jquery-appear plugin的源代碼，也能夠傳遞參數one，觸發該事件僅一次（one: true），或每次出現它（one: false）

$('#myDiv').appear(function() { 
    $("#aDiv").addClass("active"); 
}, { 
    one: false 
}); 

Answer 4

This很可能是對您有用。

總之，你也許可以做到這一點無需插件，並用一個簡單的表達，而不是：

var elem_top = $("some_element").offset().top; 
var elem_height = $("some_element").height(); 
var wind_height = $(window).height(); 
var scrollTop = $(window).scrollTop; 

if (elem_top > (wind_height + scrollTop) && 
    !(elem_top + elem_height) < wind_scrollTop) 
{ 
    //The element is inside the screen (e.g. it is directly visible) 
}