How to make jQuery waypoints plugin fire when an element is in view and not scrolled past?

The offset option determines where in relation to the top of the viewport the waypoint should fire. By default it is 0, so your element fires when it hits the top. Because what you want is common, waypoints includes a simple alias for setting the offset to fire when the whole element comes into view.

$('.box').waypoint(function() {
  $(this).css({
    borderColor: 'blue'
  });
}, { offset: 'bottom-in-view' });

If you want it to fire when any part of the element peeks in from the bottom, you should set it to '100%'.