玩超级卷轴中的固定元素

我正在构建一个视差网站使用超级卷轴画 http://johnpolacek.github.io/superscrollorama/其中使用 jquery 和 css3 有一些逐帧动画...

但最终这样做后，我遇到了一个问题，我正在尝试使用一些滚动插件导航页面......

我努力了基本的jquery使用scrollTop事件，使用Jquery 滚动到 http://demos.flesler.com/jquery/scrollTo/并使用Tween Lite 滚动到 http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html plugin浏览页面但似乎没有任何作用......

我仔细观察后遇到的问题是，页面是否固定在一起position:fixed;并且页面不会滚动到该位置并卡在...之间

使用 Jquery ScrollTo，我的代码：-

$('.menus a').click(function(e){
    e.preventDefault();
    $.scrollTo(this.hash, 2000, {
    easing:'easeInOutExpo',
    offset:3000,
    axis:'y',
    queue:true
    });
});

使用基本的scrollTop jquery，我的代码：-

$('a').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500,'easeInOutExpo');

    event.preventDefault();
});

目前我的代码的工作原理如下：-http://jsfiddle.net/tFPp3/6/ http://jsfiddle.net/tFPp3/6/

正如您在我的演示中看到的，滚动在通过散列到达确切位置之前卡在了之间......

如果我必须玩 Superscrollorama 中的固定元素，解决方案是什么？

您必须执行 2 个动画：第一个动画到达锚点偏移量，然后在 superscrollorama 添加新的动画元素并重新计算文档高度后，执行第二个动画以到达该页面上的正确关键帧（您在偏移量处固定）该部分 3000）。

$(function(){
    var hashes = [];

    $('.menus a').each(function(){
        hashes.push(this.hash);
    });
    console.log('hashes:', hashes);

    $('.menus a').click(function(e){
        e.preventDefault();
        var h = this.hash;
        var pageTop = $(h).offset()['top'];
        console.log('pageTop=',pageTop);

        $.scrollTo( pageTop+1, 2000, {
            easing:'easeInExpo',
            axis:'y',
            onAfter:function(){
                setTimeout(function(){
                    console.log('hashes:', hashes);
                    var id = hashes.indexOf(h);
                    console.log('hashes['+(id+1)+']=', hashes[(id+1)]);
                    var nextPageTop = $(hashes[id+1]).offset()['top'];
                    console.log('nextPageTop=', nextPageTop);
                    var keyOffset = pageTop + 3000;
                    console.log('keyOffset=',keyOffset);

                    if(keyOffset < nextPageTop ){
                        $.scrollTo( keyOffset, 2000, {
                          easing:'easeOutExpo',
                          axis:'y'
                       }); 
                    }
                },100);
            }
        });
    });
});

请注意，每个部分的偏移量都会不断变化，因此在启动第二个动画之前，我们必须测试我们是否不会再次滚动到下一个部分。我们还需要一点延迟，让 superscrollorama 在测试各自的偏移量之前做好准备（遗憾的是，它似乎没有提供这样做的事件）。