Question

正如标题所述，侧面锚菜单和网站的某些部分出现问题。

我相信我理解为什么会这样，但是我无法解决。

侧边菜单js

// Basic on click to trigger the scrollTo function
$('.side-nav a').click(function(e) {
    $('.active').removeClass('active');
    $(this).parent().addClass('active');
    dataScroll = $(this).attr('data-scroll-to');
    e.preventDefault();
    sideMenuScrollTo(dataScroll);
});

function sideMenuScrollTo(dataScroll) {
    console.log('scroll to block ' + dataScroll);
    controller.scrollTo(function(newpos) {
    console.log('new position ' + newpos);
    TweenMax.to(
        window,
        1, {
            scrollTo: {
                y: newpos,
                offsetY: 0,
                autoKill: true
            },
            ease: Power1.easeOut
        }
      );
    });
    controller.scrollTo('#' + dataScroll);
}

这很好，直到我使用下面的代码进入网站的某些部分时添加了scrollTo为止

var scene= new ScrollMagic.Scene({
    triggerElement: '#block_2',
    triggerHook: 'onEnter',
    duration: '100%',
    offset: 50
})

.on('enter', function(event) {
    console.log('triggered block 2');
    console.log(event.scrollDirection);
    TweenMax.to(window, 1, {
        scrollTo: {
            y: "#block_2",
            autoKill: false,
            offsetY: 0
        },
        ease: Power1.easeOut
    });

})
   .addTo(controller); // scene end
}

问题在于任何具有scrollTo功能的部分都将接管控制器并停止/中断侧面菜单的scrollTo。

换句话说，如果您正在查看第5部分，然后单击侧面菜单上的第2部分，则窗口滚动将在具有onEnter scrollTo功能的第3部分停止。

我不确定我缺少什么，将不胜感激

scrollMagic GSAP锚点菜单滚动通过onEnter scrollTo按节被劫持

0 个答案: