利用ScrollMagic＆＃34;自然擦拭＆＃34;在Anchor Navigation的三个部分

Question

我正在尝试将自然擦除添加到三（3）个部分页面。其中两个部分有＆＃34;其他内容＆＃34;这在一开始就是一场斗争。现在，这是使用scrollmagic和导航链接，剩下的唯一项目是擦除三个部分而不会丢失移动滚动动画。

看看这个codepen它应该解释手头的问题。提前谢谢！

http://codepen.io/sandovalg/pen/BoKzxB

// Init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
duration: $('section').height(),
triggerHook: .025,
reverse: true
}
});

var scene1 = new ScrollMagic.Scene({ triggerElement: '#intro' })
                            .setClassToggle('#intro-anchor', 'active')
                            .addTo(controller);
var scene2 = new ScrollMagic.Scene({ triggerElement: '#section-1' })
                            .setClassToggle('#anchor1', 'active')
                            .addTo(controller);
var scene3 = new ScrollMagic.Scene({ triggerElement: '#section-2' })
                            .setClassToggle('#anchor2', 'active')
                            .addTo(controller);
// Change behaviour of controller
// to animate scroll instead of jump
controller.scrollTo(function(target) {

TweenMax.to(window, 0.5, {
scrollTo : {
  y : target,
  autoKill : true // Allow scroll position to change outside itself
},
ease : Cubic.easeInOut
});

});


//  Bind scroll to anchor links
$(document).on("click", "a[href^=#]", function(e) {
var id = $(this).attr("href");

if($(id).length > 0) {
e.preventDefault();

// trigger scroll
controller.scrollTo(id);

// If supported by the browser we can also update the URL
if (window.history && window.history.pushState) {
  history.pushState("", document.title, id);
}
}

});