jQuery Waypoint - Want to reverse function

Question

I am using jQuery Waypoint to invoke a "Back to Top" button when you reach the div.main-content area of my site like so:

$('div.page.event div.main-content').waypoint(function() {
    $('button.scrollToTop').fadeIn(200);
});

But I can't figure out how to reverse it so that when you get back up to header.main-header the button goes away. I've tried this:

$('div.page.event header.main-header').waypoint(function() {
    $('button.scrollToTop').fadeOut(200);
});

But that doesn't work. I'm sure this is overly simple and I'm just missing the point. Can someone help?

Answer 1

You can use the direction parameter that is passed to the waypoint function. Its value will be "down" or "up" depending on which direction the user is scrolling when they cross the waypoint:

$('div.page.event div.main-content').waypoint(function(direction) {
  if (direction === 'down') {
    $('button.scrollToTop').fadeIn(200);
  }
  else {
    $('button.scrollToTop').fadeOut(200);
  }
});