我正在为一页滚动网站使用 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');
});
最佳答案
查看偏移选项
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.
}
});
关于jquery - 使用 jquery 路径点向上滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9332458/