путевые точки jquery, активировать, когда они находятся в центре окна просмотра, а не сверху?

Во всей документации говорится о том, когда путевая точка достигает верхней части окна просмотра, но я хотел бы, чтобы триггер срабатывал, когда какая-либо часть путевой точки находится в центре окна просмотра.

Этот код работает довольно хорошо, если я прокручиваю вниз, но когда я прокручиваю вверх, он явно не работает.

$('.section').waypoint(function(direction) {
    highlight('#' + this.id);
}, {
    context: '#scroll',
    offset: function (direction) {
        return $(this).height();
    }
});

Я попробовал приведенный ниже код и пару вариантов, и он даже не попал ни в один из операторов return.

$('.section').waypoint(function(direction) {
    highlight('#' + this.id);
}, {
    context: '#scroll',

    offset: function (direction) {
        if (direction == 'down') {
            return -$(this).height();
        } else {
            return 0;
        }
    }
});

Итак, теперь я пробую это, основываясь на примерах путевых точек, но $active.id не работает так, как this.id, поэтому моя функция «подсветить» не работает.

$('.section').waypoint(function (direction) {
    var $active = $(this);
    if (direction == 'down') {
        $active = $active.prev();
    }
    if (!$active.length) {
        $active = $(this);
    }
    highlight($active.id);
}, {
    context: '#scroll',
    offset: function (direction) {
        return $(this).height();
    }
});

javascript scroll jquery jquery-waypoints
person JOATMON    schedule 29.01.2013    source источник

Ответы (1)


arrow_upward
16
arrow_downward

Опция offset не принимает параметр направления. Я хотел бы знать, нашли ли вы это где-нибудь в документации, потому что если есть раздел, использующий direction в функции offset, это ошибка.

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

offset: '50%'

Если вам нужно иметь другое смещение при прокрутке вверх и прокрутке вниз, лучше всего это сделать, создав две разные путевые точки:

var $things = $('.thing');

$things.waypoint(function(direction) {
  if (direction === 'down') {
    // do stuff
  }
}, { offset: '50%' });

$things.waypoint(function(direction) {
  if (direction === 'up') {
    // do stuff
  }
}, {
  offset: function() {
    // This is the calculation that would give you
    // "bottom of element hits middle of window"
    return $.waypoints('viewportHeight') / 2 - $(this).outerHeight();
  }
});
person imakewebthings    schedule 30.01.2013
comment
Не могу поверить, что я даже не рассматривал две отдельные путевые точки. Я попробую и проверю позже. - person JOATMON; 30.01.2013