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

Question

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

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

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

Я использую следующие функции для 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

Answer 1

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

scene = scene.destroy(true); 

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