Question

I have a problem using the waypoint plugin as many tutorials like http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/ suggest.

Here is my code:

<script type="text/javascript">

jQuery(function() {
var nav_container = jQuery("#menu-wrapper");
var nav = jQuery("#menu");
nav_container.waypoint(function(event, direction) {

    jQuery("#fixed").toggleClass('stickyfixed');
    jQuery('#zweitenavigation').toggleClass('invisible');
    alert(direction);
    var new_height  = (direction === "down") ? '92px' : '195px';
    jQuery("#header").animate({'height': new_height}, 300);
},{offset:50}
);
});
</script>

The problem is that

direction === "down"

does not evaluate to true or false, it is simply undefined. Therefore the animation is just fired once.

Does anyone has an idea where the problem could be located?
The toggleClass works fine btw.

Thanks for help and best regards
stephan

Answer 1

Waypoints version 2.0 got rid of the event parameter. There is now only direction. The tutorial you are referencing has made a pretty big error in linking to this new version of Waypoints without updating their tutorial to match the new handler signature.