imakewebthings/jquery-waypoints — Issue #48: Animating elements based on ID of waypoint?
Author: watermelonkid
Created: 2012-03-08 20:31:09+00:00
State: open

This is more of a question than an issue. First of all, great plugin. It's exactly what I need for a project I'm working on where I need to animate a menu element to a specific position based on when a certain section is in view. The thing that makes this difficult is that the element is docking in a specific position relative to other elements on the page. I have this, which is based on the code used for Waypoints Home Page:

jQuery(function($) {
$('body').delegate('section.waypoint,footer.waypoint', 'waypoint.reached', function(event, direction) {
var $active = $(this);
if (!$active.length) $active = $active.end();
$('.section-active').removeClass('section-active');
$active.addClass('section-active');

// HOME WORK
if ($active.attr('id') == 'home-work'){
$("#nav-dock").animate({top: '200px'});
}
// TRANSMISSION
if ($active.attr('id') == 'home-transmission'){
$("#nav-dock").animate({top: '870px'});
}
});

It works spottily, but not always. Not sure if has to do with a delay or that by sticking that in the function, it doesn't have a very frequent listening capability? A little out of my league here, but feeling close to getting this to work. Also, seems to not work at all if I'm scrolling up--do I need to stick the same conditions in the "up" if statement?

Don't expect help here, but if anyone has time or knowledge, much appreciated.