I am using jquery waypoints plugin for a one page scrolling site. there is a fixed top menu.
<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>
The content divs are like this:
<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>
My scrolling is working fine. but problem is waypoints. If I click a link, the menu is selected (adding a class - current). I am using waypoint to do the same thing for scrolling the page. when scrolling down, it works fine. but does not work perfectly for scrolling up. It needs to be moved some more top. then it works. If I use offset -1%, then it works for scrolling up. but then there is problem for down scrolling. here is my js code:
// 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');
});
Look at the offset option
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.
}
});