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

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

Как я это делаю сейчас. Я использую этот прекрасный сценарий (http://code.google.com/p/jquery-appear/), который отлично работает, просто запускает событие jquery, когда div становится видимым для пользователя. Однако он срабатывает только один раз. Поэтому, если вы прокрутите страницу вниз, jquery будет выполнен нормально. Но если я прокручу вверх, а затем снова вниз, огонь исчезнет. Это мой jquery:

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

Что я хочу сделать: заставить скрипт выполняться каждый раз, когда появляется "myDiv", а не только первый.

Кто-нибудь знает, как я могу это сделать?


html jquery css
person Paparappa    schedule 08.11.2011    source источник

Ответы (4)


arrow_upward
7
arrow_downward

чтобы судить, виден 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
}
person Ya Zhuang    schedule 08.11.2011
comment
При использовании вашего скрипта я получаю сообщение об ошибке в консоли: a.style is undefined Странно? - person Paparappa; 08.11.2011
comment
@Paparappa согласно bugs.jquery.com/ticket/9434, это исправлено в jQuery 1.7 :) - person Ya Zhuang; 08.11.2011

arrow_upward
4
arrow_downward

Посмотрев исходный код плагина jquery-appearance, можно передать аргумент one, чтобы запускать событие только один раз (one: true) или каждый раз, когда оно появляется (one: false)

$('#myDiv').appear(function() {
    $("#aDiv").addClass("active");
}, {
    one: false
});
person christianvuerings    schedule 08.11.2011
comment
Однако этот код не работал, если я вошел в файл .js и изменил его на false, моя проблема была решена. Ваш ответ более чем вдохновил меня на ее решение. - person Paparappa; 08.11.2011

arrow_upward
3
arrow_downward

Я использую аналогичный плагин, но он использует метод привязки и использует событие -> 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
  }
});
person Manse    schedule 08.11.2011

arrow_upward
1
arrow_downward

Это будет вероятно будет вам полезен.

Во всяком случае, вы, вероятно, могли бы сделать это без плагина и вместо этого с простым выражением:

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)
}
person Marcus Hansson    schedule 08.11.2011