2

我正在使用SuperScrollorama构建一个Parallax 网站，它使用 jquery 和 css3 逐帧播放一些动画...

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

我尝试过使用事件的基本 jquery ，使用Jquery ScrollTo和使用Tween Lite ScrollTo插件scrollTop来浏览页面，但似乎没有任何效果......

护目镜后我遇到的问题是，如果页面被固定在一起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 中的固定元素，解决方案是什么？

4

3 回答 3

4

您必须做 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 在测试各自的偏移量之前做好准备（遗憾的是，它似乎没有提供这样做的事件）。

于 2013-09-05T04:15:41.233 回答
1

我和你有同样的问题。以下是我修复它的方法......

首先，我们知道 Superscrollorama 在您的元素之前添加了一个间隔销，它设置了元素的高度，该高度定义了用户必须滚动一个部分的时间（持续时间）......所以理论上我们要做的就是是将在要滚动到的元素之前发生的所有引脚高度相加，然后从该元素的顶部偏移...

我所做的是......

找出您要滚动到的元素。检查在该引脚之前有多少 supersrollorama-pin-spacers，计算出所有引脚的高度，然后将其偏移到您的初始 scrollTo 函数。

pin = $('#pin-id').prev(); //find the spacer pin
prevPin = pin.prevAll('.superscrollorama-pin-spacer'); //find all the pins before this
heights = []; //create an array to store the pin heights

$.each(prevPin, function( index, value ) {

    value = $(this).attr('height'); //get each height
    heights.push(value);   // push it to array

});

//use eval to join all the heights together
heights = eval(heights.join("+"));

现在我们有了高度，让我们滚动到它......

TweenMax.to($('html,body'),1, { scrollTop:heights, });

祝你好运！我希望这可以帮助你。

于 2013-09-19T16:09:10.807 回答
0

I have had a similar issue and found that janpaepke on the superscrollorama project added an additional toggle to make this easier.

You can manually add the spacers so you don't need to make adjustments by setting the pushFollowers flag in your pin to false.

Example JS

controller.pin($('#pin-id'), 200, {
    anim: new TimelineLite().append([TweenMax.fromTo( $('#pin-id'), 2, {css:{opacity: 1}}, {css:{opacity: 0}})]),
    offset: 0,
    pushFollowers: false
});

Example HTML

<div id="pin-id">

Bunch of Content

</div>
<div style="padding-top: 200px"></div>
于 2013-10-15T16:13:27.780 回答