玩转超级卷轴中的固定元素 [英] Play through pinned elements in superscrollorama

问题描述

我正在使用 SuperScrollorama 建立一个 Parallax网站，该网站具有一些动画效果逐帧使用jquery和css3 ...

I am building a Parallax website using SuperScrollorama which have some animation frame by frame using jquery and css3...

但是在这样做之后，我陷入了一个问题，我试图使用一些滚动插件来浏览页面...

But after ending up doing so i am stuck in a problem, i am trying to navigate the pages using some scroll plugin...

我使用 Jquery ScrollTo 使用scrollTop事件尝试了基本jquery并使用 Tween Lite ScrollTo 插件浏览页，但似乎无济于事...

I have tried Basic jquery using scrollTop event, using Jquery ScrollTo and using Tween Lite ScrollTo plugin to navigate through pages but nothing seems to work...

浏览后我遇到的问题是，如果页面按position:fixed;固定在一起，并且页面无法滚动到该位置并停留在...之间，那么...

The issue i get after goggling it is if pages are pinned together as position:fixed; and pages doesnot scroll to that position and stuck between...

使用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/

Currently my code works like this:- http://jsfiddle.net/tFPp3/6/

如您在我的演示中所见，滚动停留在通过散列到达确切位置之前.

As you can see in my demo, the scroll stuck between before reaching the exact position through hash...

如果我必须浏览Superscrollorama中的固定元素怎么办?

What is the solution if i have to play through the pinned elements in Superscrollorama?

推荐答案

您必须做2个动画:一个动画达到ancher偏移，然后在superscrollorama添加了新的动画元素并重新计算文档高度后，执行第二个动画以到达该页面上的正确关键帧(已在该部分的偏移量3000处固定).

You'll have to do 2 animations : one to reach the ancher offset and then, after superscrollorama added new element for animation and recalculate the document height, do the second animation to reach the correct key frame on that page (that you fixed at offset 3000 of that section).

$(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);
            }
        });
    });
});

请注意，每个部分的偏移量都在不断变化，因此，在启动第二个动画之前，我们必须测试我们是否不会再次滚动到下一个部分.在此之前，我们还需要稍作延迟，以便让超级卷轴制作酱油，然后再测试相应的偏移量(此外，它似乎没有提供这样做的机会).

Note that each section offset changes constantly so, before launching the second animation, we have to test that we are not scrolling till the next section again. We also need a little delay here to let superscrollorama make its sauce before testing respective offsets (saddly it doesn't seem to provide an event to do so).

这篇关于玩转超级卷轴中的固定元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！