Question

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

但是在结束这样做后我遇到了问题，我试图使用一些滚动插件来浏览页面......

我使用scrollTop事件尝试基本jquery，使用Jquery ScrollTo并使用Tween Lite ScrollTo插件浏览网页，但似乎没有任何效果... < / p>
我在goggling之后得到的问题是，如果页面被固定在一起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个动画：一个到达ancher偏移然后，在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);
            }
        });
    });
});

请注意，每个部分偏移都会不断变化，因此，在启动第二个动画之前，我们必须测试我们是否再次滚动到下一部分。我们还需要稍微延迟一点，让超级卷曲在测试各自的补偿之前制作它的酱汁（可悲的是它似乎没有提供这样做的事件）。

Answer 2

我和你有同样的问题。这是我如何解决它......

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

我做的是......

找出要滚动到的元素。检查在该引脚之前有多少个超级圆柱引脚间隔符，计算出所有引脚的高度，然后将其偏移到初始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, });

祝你好运！我希望这会对你有所帮助。

Answer 3

我遇到了类似的问题，发现在superscrollorama项目上的janpaepke添加了一个额外的切换，以使这更容易。

您可以手动添加垫片，这样就不需要通过将pin中的pushFollowers标志设置为false来进行调整。

示例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
});

示例HTML

<div id="pin-id">

Bunch of Content

</div>
<div style="padding-top: 200px"></div>

通过superscrollorama中的固定元素播放

3 个答案: