CODEWITHSUNDEEP
jqueryjquery-waypoints
Imrul.H
Imrul.H

Reputation: 5870

scrolling up with jquery waypoints

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');       
});

Upvotes: 3

Views: 17875

Answers (4)

Jackwin tung
Jackwin tung

Reputation: 339

I had the same issue just like yours. I solved it by calling the waypoint twice.

$(".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});

I know it's not a good answer. But it works for me.

Upvotes: 1

Andrei
Andrei

Reputation: 555

here is an example :

$('.page_content').waypoint(  
    function(direction) {

        if (direction ==='down') {
            $(this).fadeTo(1000, 1);
        }
        else {
                $(this).fadeTo(1000, 0);        
        }

    }, { offset: '50%' });

this is made so that the object becomes visible on scroll down and disappears on scroll up the offset is used to determine where will the animation start. the default offset is 0% that will imply an animation start when the very top of the object hits the top of the browser

Upvotes: 0

francoboy7
francoboy7

Reputation: 303

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.

   }
});

Upvotes: 2

imakewebthings
imakewebthings

Reputation: 3398

The answer is kind of sitting there in your code already. The direction variable in the function callback is passed a string of either 'up' or 'down'. You have the code for the down direction but you should also do something for the up direction.

if (direction === 'down') {
  // Your current code
}
else {
  // Code to select the previous section
}

Upvotes: 0

Related Questions