Javascript/Jquery超级Scrollorama导航问题
在我目前正在开发的Wordpress网站上,我的客户希望首页的不同部分从底部向上滑动,并覆盖上一部分,如擦拭或滑动过渡。使用这里找到的super scrollorama:,我成功地实现了预期的结果 接下来,我只需要在首页上创建一个导航菜单。我这样做了,并在页面上的不同点设置了锚。当我点击导航菜单链接时,我还使用了scrollTo库来制作旋转动画。但是,我遇到了一些问题:Javascript/Jquery超级Scrollorama导航问题,javascript,jquery,superscrollorama,Javascript,Jquery,Superscrollorama,在我目前正在开发的Wordpress网站上,我的客户希望首页的不同部分从底部向上滑动,并覆盖上一部分,如擦拭或滑动过渡。使用这里找到的super scrollorama:,我成功地实现了预期的结果 接下来,我只需要在首页上创建一个导航菜单。我这样做了,并在页面上的不同点设置了锚。当我点击导航菜单链接时,我还使用了scrollTo库来制作旋转动画。但是,我遇到了一些问题: 当我在顶部单击“showcase”时,它会将我带到showcase部分,但products部分(它后面的div)与它重叠 其
- 当我在顶部单击“showcase”时,它会将我带到showcase部分,但products部分(它后面的div)与它重叠
- 其他div似乎存在以下div与当前div重叠的相同问题
- 我只能向前导航。当我试图倒退时,它不会(除了“家”)
- 我认为这可能与div的CSS“top”属性有关,所以每次单击函数启动时,我都尝试重置它们,但没有成功。所以我暂时把它拿走了
- 当前,将javascript设置为阻止滚动到锚点的默认操作,而将其设置为滚动到实际div本身。然而,我仍然有同样的问题
$(document).ready(function() {
jQuery('.home-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo(0, 1000, {queue:true});
});
jQuery('.showcase-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#showcase_content', 1000, {queue:true});
});
jQuery('.products-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#products_content', 1000, {queue:true});
});
jQuery('.about-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#about_content', 1000, {queue:true});
});
jQuery('.locator-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#locator_content', 1000, {queue:true});
});
jQuery('.contact-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#contact_content', 1000, {queue:true});
}); });
scrollorama代码:
$(document).ready(function() {
$('#wrapper').css('display','block');
var controller = $.superscrollorama();
var pinDur = 4000; /* set duration of pin scroll in pixels */
// create animation timeline for pinned element
var pinAnimations = new TimelineLite();
pinAnimations
.append([
TweenMax.to($('#showcase'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#products'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#about'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#locator'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#contact'), .5, {css:{top:0}})
], .5)
.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));
controller.pin($('#examples-pin'), pinDur, {
anim:pinAnimations,
onPin: function() {
$('#examples-pin').css('height','100%');
},
onUnpin: function() {
$('#examples-pin').css('height','2000px');
}
}); });
所有截面div都位于父div内。截面div的高度、宽度和顶部均为100%
包含所有这些节div的父div如下所示:
#examples-pin {
position: relative; /* relative positioning for transitions to work? */
width: 101%; /* max width */
height: 2000px; /* height of 2000px for now */
overflow: hidden; /* hide the overflow for transitions to work */
margin-bottom: -200px; /* negative bottom margin */
}
总之,pushFollowers:对于所有销为false,解决方案是在销元素之后通过div和padding手动设置间距 似乎这个问题将在下一个版本的SuperScrama中得到解决。我会看第94期,他们有新版本的演示代码