Не удается заставить jQuery Waypoints хорошо работать с контентом, созданным JavaScript

Итак, я возился с jQuery Waypoints для проекта, над которым сейчас работаю. Я использовал его в прошлом, и у меня не было проблем, но для этого конкретного проекта я не могу заставить его работать. Что отличается на этот раз, так это то, что весь контент внедряется с помощью JavaScript, хотя это не должно быть проблемой, поскольку вы используете $.waypoints('refresh'); для простого обновления позиций путевых точек.

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

$(document).ready(function(){

    setTimeout(function(){

        waypoints();
        $.waypoints('refresh');

    }, 2000);

});

function waypoints() {

    alert('jQuery Waypoint has initialized');
    //ep.listener.waypoints()

    $(function() {
        var $things = $('article.curr section');

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

        $things.waypoint(function(direction) {
          if (direction === 'up') {
            //do stuff
            console.log(this);
            console.log('up');            
          }
        }, {
          offset: function() {
            return $.waypoints('viewportHeight') / 2 - $(this).outerHeight();
          }
        });

    });

}

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

Что я здесь делаю неправильно?

Демонстрация доступна ЗДЕСЬ
Имя пользователя: dev
Пароль: лолбой


person INT    schedule 21.08.2013    source источник
comment
Изначально демо не очень хорошо работало в Chrome. Должно быть исправлено сейчас.   -  person INT    schedule 25.08.2013


Ответы (1)


Вы сделали свой тег body position:fixed и overflow:hidden, что означает, что событие прокрутки никогда не запускается в окне, вместо этого событие прокрутки находится в #treats-for-trash. Waypoint прослушивает событие прокрутки в окне.

Вы должны либо изменить свой css, чтобы окно прокручивалось вместо статьи, либо изменить контекст Waypoint на правильный элемент, т.е. #treats-for-trash (см.: http://imakewebthings.com/jquery-waypoints/#doc-options).

person RoryKoehein    schedule 26.08.2013
comment
Спасибо! Думал, что я достаточно просмотрел эти документы сверху донизу, но вы доказали, что я ошибался :) - person INT; 26.08.2013