jquery waypoints: как связать несколько точек на одном объекте - PullRequest
Новая
       39

jquery waypoints: как связать несколько точек на одном объекте

2 голосов
/ 26 января 2012

jquery waypoints запускает обратный вызов, когда объект появляется в области просмотра с прокруткой. Это прекрасно работает для базовой реализации.

Теперь я пытаюсь назначить две путевые точки одному и тому же тегу article: одну прямо сейчас, когда появляется <article />, другую, когда <article /> видна 121px сверху: offset: 121 (при прокрутке вниз страница). 

// waypoint 1
$.aquaverde.article.waypoint(function(event, direction) {
        currentIndex = $(this).index();
        if (direction === "down") {
            $.aquaverde.wrapper.find('.fixed:eq('+ currentIndex +')').show().siblings(".fixed").hide();
        }
});

// waypoint 2
$.aquaverde.article.find('.page').waypoint(function(event, direction) {
        if (direction === "down") {
            $.aquaverde.wrapper.find(".fixed").hide();
        }
    },{
    offset: 121
});

к сожалению, плагин запускает оба обратных вызова, когда объект находится на 121px от вершины, поэтому вторая конфигурация занимает доминирующее положение.

Хорошо, тогда я попытался сделать цепной вызов: 

// waypoint 1
$.aquaverde.article.waypoint(function(event, direction) {
        currentIndex = $(this).index();
        if (direction === "down") {
            $.aquaverde.wrapper.find('.fixed:eq('+ currentIndex +')').show().siblings(".fixed").hide();

            // waypoint 2
            $(this).waypoint(function(event, direction) {
                $.aquaverde.wrapper.find(".fixed").hide();
            },{
                offset: 121             
            });
        }
});

Но это дает мне точно такой же результат, как приведенный выше. Любые идеи, чтобы решить это?

http://imakewebthings.github.com/jquery-waypoints/

Спасибо.

1 Ответ

8 голосов
/ 26 января 2012

ОБНОВЛЕНИЕ: Все ниже верно для jQuery Waypoints 1.x.После первоначального ответа были выпущены Waypoints 2.0, включающие поддержку нескольких точек на одном элементе.Метод OP, состоящий в простом вызове waypoint дважды, должен просто работать.(Хотя подпись обратного вызова изменилась только на один параметр, direction.)

В настоящее время это невозможно с путевыми точками jQuery.Каждый элемент может иметь только одно смещение, поэтому второй переопределяет первый.Это немного похоронено, но проблема была открыта до этого .Мой ответ содержит два метода для обхода этого ограничения:

  • Используйте второй элемент, будь то оболочка или любой другой элемент с таким же смещением на странице, как у элемента article.
  • Используйте другой плагин, в поле зрения в случае проблемы GitHub.

Это ваши лучшие ставки на данный момент.Для этого я создал новый выпуск , так как это было бы полезно, но требует серьезного пересмотра плагина.

ОБНОВЛЕНИЕ: Приведенный выше ответ остается верным,В вашем конкретном случае, то, что вы пытаетесь сделать с использованием дочернего элемента, будет работать нормально, но вы должны добавить вызов event.stopPropagation() в дочерней путевой точке, чтобы событие не всплыло и эффективно не запустило путевую точку статьи.уничтожить ваш скрытый вызов.

...