Путевая точка не распознается в загружаемом с помощью Ajax контенте

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

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

Вот что у меня есть:

$(".cta").live('click', function () {
    $('#faq').load('about-us/faqs/index.html'),
    function () {
        $("#faq").waypoint(function (event, direction) {
            if (direction === 'up') {
                $("#siteNav li a").removeClass("siteNavSelected");
                $("#siteNav li.nav3 a").addClass("siteNavSelected");
            }
        }, {
            offset: function () {
                return $.waypoints('viewportHeight') - $("#faq").outerHeight();
            }

        });
    }
    return false;
});

Есть идеи? Спасибо.


jquery ajax jquery-waypoints
person Yahreen    schedule 01.08.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Используйте $.waypoints('refresh'); из документации:

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

person Svilen Ivanov    schedule 04.07.2013
comment
Я обнаружил, что добавление $.waypoints('refresh'); решило мою проблему, связанную с тем, что события путевых точек не срабатывали после того, как содержимое AJAX было введено на страницу. Спасибо Свилен. - person Dan; 03.12.2014

arrow_upward
0
arrow_downward

Я не знаком с внутренними функциями плагина waypoint, но вы также можете привязать событие прокрутки, а затем зафиксировать значение .scrollTop(). Будет выглядеть примерно так:

$(document).bind('scroll', function(event) {        
    var scrollTop = $(window).scrollTop();
    if (scrollTop < 1000 && $('siteNav li').hasClass('styleA')) { return; }
    else { 
        $('siteNav li').removeClass('styleB');
        $('siteNav li').addClass('styleA');
    }
    if (scrollTop > 1000 && $('siteNav li').hasClass('styleB')) { return; }
    else {
        $('siteNav li').removeClass('styleA');
        $('siteNav li').addClass('styleB');
    }
});

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

person Peter Oram    schedule 24.10.2012