javascript - 玩 super 卷轴中的固定元素

Question

我正在使用 SuperScrollorama 构建一个视差网站 使用 jquery 和 css3 逐帧制作一些动画...

但是在结束这样做之后，我陷入了一个问题，我正在尝试使用一些滚动插件来导航页面......

我已经尝试过使用 scrollTop 事件的基本 jquery，使用 Jquery ScrollTo并使用Tween Lite ScrollTo插件用于浏览页面，但似乎没有任何作用...

我浏览后遇到的问题是，如果页面被固定在一起作为 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/

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

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

Answer 1

您必须执行 2 个动画:第一个动画到达 anchor 偏移量，然后在 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 在测试各自的偏移量之前做好准备(遗憾的是，它似乎没有提供这样做的事件)。