Плагин jQuery Waypoints не работает

$(function() { 
  var waypoints = $('.boom').waypoint(function(direction) { 
    alert('boom hit top') 
  }) 
})

.boom { 
  padding: 50px; 
  background: lightblue; 
  margin: 10px 0 0; 
  height: 800px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://imakewebthings.com/waypoints/js/jquery.waypoints.min.js"></script> 
 
<div class=top> 
  scroll down 
  <br> 
  <br> 
  <br> 
  <br> scroll down 
  <br> 
  <br> 
  <br> 
  <br> scroll down 
  <br> 
  <br> 
  <br> 
  <br> scroll down 
  <br> 
  <br> 
  <br> 
  <br> scroll down 
  <br> 
  <br> 
  <br> 
  <br> scroll down 
  <br> 
  <br> 
  <br> 
  <br> 
</div> 
<div class=boom>BOOOOM</div>