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页面加载问题

回答

相关问题