Javascript/Jquery超级Scrollorama导航问题
Javascript/Jquery Super Scrollorama Navigation Issues
在我目前正在开发的Wordpress网站上,我的客户希望首页的不同部分从底部向上滑动,并覆盖前一部分,就像擦拭或滑动过渡一样。使用此处找到的超级scrollorama:http://johnpolacek.github.com/superscrollorama/,我设法达到了预期的结果。
接下来,我只需要在首页上创建一个导航菜单。我这样做了,并在页面上的不同点设置了锚。当我点击导航菜单链接时,我还使用了scrollTo库来浏览动画。然而,我遇到了许多问题:
- 当我在顶部点击"showcase"时,它会把我带到showcase部分,但products部分(它后面的div)与它重叠
- 其他div似乎也有同样的问题,即以下div与当前div重叠
- 我只能向前导航。当我试图倒退时,它不会(除了"家")
- 我认为这可能与div的CSS"top"属性有关,所以每次点击函数启动时我都尝试重置它们,但没有成功。所以我暂时把它去掉了
- 当前设置javascript以防止滚动到锚点的默认操作,而将其设置为滚动到实际的div本身。然而,我仍然有同样的问题
编辑:我解决了上述所有问题,但现在出现了一个新问题。如果你在网站上滚动,然后调整浏览器窗口的大小并向上滚动,你会注意到底部有一点被切掉了。我看了超级全景页面,它也有同样的问题。我希望有人知道如何解决这个问题。
以下是我目前正在工作的网站:http://breathe.simalam.ca/
以下是滚动的javascript:
$(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');
}
}); });
所有的sectiondiv都在父div中。sectiondiv的高度、宽度和顶部都是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和填充手动间隔就是解决方案。
这个问题似乎将在下一个版本的超级全景中得到解决。我会看着https://github.com/johnpolacek/superscrollorama/issues第94期他们有新版本的演示代码。
相关文章:
- pager.js的导航问题
- winjs应用程序中的导航问题
- 平滑滚动并突出显示导航问题
- 粘性导航-JS Waypoints在浏览器调整大小时出现自定义粘性导航问题
- Javascript/Jquery超级Scrollorama导航问题
- j查询滑块导航问题
- 带有页面导航问题的 HTML5 滑块
- Ionic:带有选项卡和侧菜单导航问题的主详细信息
- Javascript 修复了导航问题
- 使用 Twitter 引导程序 3 的网站出现 IE11 导航问题
- URI 路径导航问题
- 引导侧菜单导航问题
- 如何使用jquery-mobile解决页面导航问题
- JSSOR的项目符号导航问题
- 引导程序滑块旋转木马与缩略图导航问题
- Multiscroll.js的导航问题
- JavaScript ES6侧导航问题时,函数调用
- Backbone.js主从视图,导航问题(包括jsfiddle)
- jQuery AJAX导航问题
- 两个PHP递归导航问题