在我目前正在开发的一个 Wordpress 网站上，我的客户希望首页的不同部分从底部向上滑动并覆盖前一部分，就像擦除或滑动过渡一样。使用在这里找到的超级滚动条： http ://johnpolacek.github.com/superscrollorama/ ，我设法达到了预期的结果。
接下来，我只需要在首页创建一个导航菜单。我这样做了，并在页面上的各个不同点设置了锚点。当我单击导航菜单链接时，我还使用 scrollTo 库来滚动动画。但是，我遇到了一些问题：
- 当在顶部并单击“展示”时，它会将我带到展示部分，但产品部分（紧随其后的 div）与其重叠。
- 其他 div 似乎有以下 div 与当前 div 重叠的相同问题
- 我只能向前导航。当我尝试向后退时，它不会（“主页”除外）
- 我认为这可能与 div 的 CSS“top”属性有关，所以我尝试在每次单击功能启动时重置它们，但它不起作用。所以我暂时把它删了。
- 当前设置 javascript 以防止滚动到锚点的默认操作，而是将其设置为滚动到实际的 div 本身。但是，我仍然遇到同样的问题。
编辑：我解决了上述所有问题，但现在出现了一个新问题。如果您滚动浏览该站点，然后调整浏览器窗口的大小并向上滚动，您会注意到底部的一部分被切断了。我查看了 superscrollorama 页面，它也有同样的问题。我希望有人知道如何解决这个问题。
这是我目前正在开发的网站：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});
}); });
滚动代码：
$(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 */
}