Scrollmagic ajax頁面加載問題

嗨，大家好我目前正在建立一個Wordpress頁面，我在頁面中使用Ajax加載並使用Scrollmagic設置觸發不同容器的點以執行一些視差效果。Scrollmagic ajax頁面加載問題

在第一頁視圖中，一切正常，並且視差滾動效果按預期發生，並設置觸發點。

但是，當我然後使用菜單導航到新頁面時，我得到一個「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)

我猜，我莫名其妙地需要重新初始化，每當一個新的頁面與阿賈克斯裝入觸發器。其中我做通過下面的代碼：

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

來源

2017-01-03 Mikkel Fennefoss

經過一番掙扎我改寫了我的卷軸魔法的場面將與阿賈克斯功能一起初始化。我用：

scene = scene.destroy(true);

爲了銷燬場景和重置觸發引腳每次我做了Ajax調用。

來源

2017-01-09 15:04:12

Scrollmagic ajax頁面加載問題

回答

相關問題