我正在将 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>
我的滚动工作正常。但问题是航点。如果我单击一个链接,则会选择菜单(添加一个类 - 当前)。我正在使用航点来做同样的事情来滚动页面。向下滚动时,它工作正常。但不能完美地向上滚动。它需要再移一些顶部。然后它工作。如果我使用偏移量 -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');
});