我正在为单页滚动网站使用jquery waypoints插件。有一个固定的顶级菜单。
<ul id="main_nav">
<li><a href="#home">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#contact">contact</a></li>
</ul>
内容div是这样的:
<div id="content">
<div id="home" class="page_content">Content here</div>
<div id="about" class="page_content">Content here</div>
<div id="contact" class="page_content">Content here</div>
</div>
我的滚动工作正常。但问题是航路点。如果单击链接,则会选择菜单(添加类 - 当前)。我使用waypoint来滚动页面做同样的事情。向下滚动时,它工作正常。但是滚动起来并不完美。它需要更多地移动顶部。然后它工作。如果我使用偏移-1%,那么它适用于向上滚动。但是向下滚动存在问题。这是我的js代码:
// CODE FOR SCROLLING
$('ul#main_nav a').bind('click',function(event){
$('ul#main_nav a').removeClass("current");
$(this).addClass("current");
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
// CODE FOR WAYPOINT
$('.page_content').waypoint({offset: '0%'});
$('.page_content').bind('waypoint.reached', function(event, direction) {
var wayID = $(this).attr('id');
$('.current').removeClass('current');
$('#main_nav a[href=#'+wayID+']').addClass('current');
});
答案 0 :(得分:2)
查看偏移选项
someElements.waypoint(function(event, direction) {
if (direction === 'down') {
// do this on the way down
}
else {
// do this on the way back up through the waypoint
offset: '50%' // trigger at middle of page.
}
});
答案 1 :(得分:0)
答案就在于您的代码已经存在。函数回调中的direction
变量传递一个'up'或'down'字符串。你有向下方向的代码,但你也应该为向上的方向做点什么。
if (direction === 'down') {
// Your current code
}
else {
// Code to select the previous section
}
答案 2 :(得分:0)
这是一个例子:
$('.page_content').waypoint(
function(direction) {
if (direction ==='down') {
$(this).fadeTo(1000, 1);
}
else {
$(this).fadeTo(1000, 0);
}
}, { offset: '50%' });
这样做是为了在向下滚动时对象变为可见,在向上滚动时消失 偏移量用于确定动画的开始位置。默认偏移量为0%,表示当对象的最顶部到达浏览器顶部时动画开始
答案 3 :(得分:0)
我和你的一样有同样的问题。我通过两次调用航点来解决它。
$(".page_content").waypoint(function(direction){ // no offset on the way down
if(direction == 'down') {
// do this on the way down
}
}).waypoint(function(direction){ // has offset on the way up
if(direction == 'up') {
// do this on the way up
}
}, {offset: -1});
我知道这不是一个好的答案。但它对我有用。