$.waypoints('refresh'); calls the handler with 'up' instead of 'down' even if the current scroll pos is past down about waypoints HOT 3 CLOSED

See #4 (and #10, #13). Your waypoint element and your fixed position element should not be one and the same. The fixed positioning means it's place in the document is constantly changing as you scroll, and a call to refresh is correct in firing up given the elements new position. In my sticky elements example, you'll see my waypoint is the .main-nav-holder, which always remains in the same place, while it's child .main-nav gains and loses fixed positioning.

from waypoints.

So you are saying that:

   $('#controls').waypoint(function(event, direction) {
    $(this).css("width", $(this).outerWidth());
    $(this).toggleClass('sticky', direction === "down");
    event.stopPropagation();
});

.sticky { position:fixed; top:0; left:0; background-color:#fff; margin-left:21px; box-shadow: 0 4px 6px -5px #888; }

is wrong.

from waypoints.

This has been fixed. See http://jsfiddle.net/8Wafr/50/

from waypoints.