title: Waypoint function undefined
body: <p>I am just starting out with Waypoints in a site I want to create.</p>
  
  <p>For test purposes, I created a page with 4 colored divs. I want to test if waypoints fires a function when I scroll to the second div.</p>
  
  <p>However the console spits an error: <code>Uncaught ReferenceError: Waypoint is not defined</code></p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
      &lt;script data-require="waypoints@2.0.4" data-semver="2.0.4" src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="one"&gt;&lt;/div&gt;
      &lt;div id="two"&gt;&lt;/div&gt;
      &lt;div id="three"&gt;&lt;/div&gt;
      &lt;div id="four"&gt;&lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#one{
    background-color:red;
   // width:100%;
    height:400px;
  }
  
  #two{
    background-color:blue;
    float:clear;
    height:400px;
  }
  
  #three{
    background-color:green;
    height:400px;
  }
  
  #four{
    background-color:yellow;
    height:400px;
  }
  </code></pre>
  
  <p>JQUERY/WAYPOINTS:</p>
  
  <pre><code>var waypoint = new Waypoint({
    element: document.getElementById('#two'),
    handler: function(direction) {
      alert('I am 20px from the top of the window');
    },
  });
  </code></pre>
  
  <p>Here is a <a href="http://plnkr.co/edit/f3SaWE7XLQOsAHOCE7oh?p=preview" rel="nofollow">link</a> to plunker.</p>