Событие пожара, когда div отображается посетителю с помощью jQuery?

Question

Функция: Я хочу изменить класс определенного элемента, когда пользователь видит определенный div (прокручивается до него).

Как сделать это сейчас: Я использую этот прекрасный сценарий (http://code.google.com/p/jquery-appear/) работает действительно которым отлично просто огнь события 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) 
}