Scrollmagic Ajax Seite laden Problem

Question

Hallo Jungs Ich richte gerade eine Wordpress-Seite, wo ich in Seiten mit Ajax laden und mit Scrollmagic festlegen, um Punkte für verschiedene Container auszulösen, um einige Parallaxe-Effekte zu tun.

Auf der ersten Seite Ansicht funktioniert alles gut und die Parallax Scrolling-Effekte passieren wie erwartet, und die Triggerpunkte sind eingestellt.

Aber wenn ich dann das Menü verwenden, um zu einer neuen Seite zu navigieren, bekomme ich eine "Uncaught TypeError: Cannot read property 'hasAttribute' of null". Ich bin der Meinung, dass dies daran liegen könnte, dass ich die bereits vorhandenen Triggerpunkte nicht lösche oder entferne, bevor ich neue hinzufüge, aber ich bin mir nicht sicher, ob dies das Problem ist.

ich die folgende Funktion für die Scrollmagic bin mit Trigger, die auf dem Dokument bereit läuft ist:

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) 

Ich vermute, dass ich brauche, um irgendwie die Trigger neu zu initialisieren, wenn eine neue Seite mit Ajax geladen in. Was ich durch den folgenden Code tue:

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 

Siehe Code Stift hier: http://codepen.io/fennefoss/pen/RKbdOe

Answer 1

Nach einigen kämpfen ich meine Scroll-magische Szenen neu geschrieben zusammen mit der Funktion Ajax initialisiert werden. Ich benutzte:

Um die Szenen zu zerstören und die Trigger-Pins jedes Mal, wenn ich den Ajax-Aufruf.