Scrollmagic ajax страница загрузки проблема

Привет, ребята, я в настоящее время настраиваю страницу Wordpress, где я загружаю на страницах с Ajax и использую Scrollmagic, чтобы установить точки срабатывания для разных контейнеров, чтобы сделать некоторые эффекты параллакса.

На первом просмотре страницы все работает отлично, эффекты прокрутки параллакса происходят, как и ожидалось, и точки запуска установлены.

Однако когда я затем использую меню для перехода на новую страницу, я получаю "Uncaught TypeError: Cannot read property 'hasAttribute' of nullMsgstr "Я полагаю, что это может быть связано с тем, что я не удаляю уже существующие триггерные точки или удаляю их перед добавлением новых, но я не уверен, что это проблема.

Я использую следующую функцию для триггеров Scrollmagic, которая запускается при готовности документа:

initSections: ->
    controller = new ScrollMagic.Controller()
    for $section in $('.page-row, .scroll-trigger')
        do ->
            scene = new (ScrollMagic.Scene)(
                triggerElement: $section
                triggerHook: 0.75
                )
            .setClassToggle($section, 'in-view')
            .addIndicators()
            .addTo(controller)

Я предполагаю, что мне как-то нужно заново инициализировать триггеры всякий раз, когда новая страница загружается с Ajax. Что я делаю через следующий код:

bindNavLinks: ->
    # Bind initial url
    url = window.location.href
    window.history.pushState({path: url}, url, url)

    $.ajaxSetup({cache:false})
    $('nav.main li a, .page_item a').click (e) =>
        e.preventDefault()
        pageUrl = $(e.target).attr('href')
        if pageUrl != window.location.href
            window.history.pushState({path: pageUrl}, pageUrl, pageUrl)
            @loadUrl(pageUrl)

loadUrl: (url) ->
    setTimeout (->
        $('#main').load url + ' #main > *', (response, status, xhr) ->
    ),2000

Смотрите код пера здесь: http://codepen.io/fennefoss/pen/RKbdOe

1 ответ

Решение

После некоторых трудностей я переписал свои магические сцены прокрутки для инициализации вместе с функцией Ajax. Я использовал:

scene = scene.destroy(true);

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

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

// without resetting the scenes
controller = controller.destroy();

// with scene reset
controller = controller.destroy(true);

Ссылка: документация Scrollmagic Controller http://scrollmagic.io/docs/ScrollMagic.Controller.html

Другие вопросы по тегам