通过superscrollorama中的固定元素播放
我正在使用SuperScrollorama建立一个Parallax网站 ，它使用jquery和css3一帧一帧地制作动画……
但在结束这样做之后我遇到了问题，我正在尝试使用一些滚动插件来浏览页面…
我已经尝试了使用scrollTop事件的Basic jquery，使用Jquery ScrollTo并使用Tween Lite ScrollTo插件来浏览页面，但似乎没有任何工作……
我在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中的固定元素，那么解决方案是什么？
您将需要做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); } }); }); });
请注意，每个部分偏移都会不断变化，因此，在启动第二个动画之前，我们必须测试我们是否再次滚动到下一部分。 我们还需要稍微延迟一下，让supercrollorama在测试各自的补偿之前制作它的酱汁（可悲的是它似乎没有提供这样做的事件）。
我和你有同样的问题。 这是我如何解决它….
首先我们知道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, });
祝好运！ 我希望这可以帮助你。
我有一个类似的问题，发现在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
Bunch of Content