Jquery .waypoint not working
<p>i have the next code, what i need is when scrolling down reaches the class .ua, to show the alert. But nothing is happening. I also checked the route of script and stuff like .addClass works perfectly.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {

 $('.ua').waypoint(function() {
    alert('Top of header hit top of viewport.');
 });

});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;title&gt;First one&lt;/title&gt;
 &lt;link rel="stylesheet" type="text/css" href="css/grid.css"&gt;
 &lt;link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
 &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
 &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;nav class="main-nav"&gt;
  
 &lt;/nav&gt;
 &lt;div class="main-div"&gt;
  
 &lt;/div&gt;
 &lt;div class="ua"&gt;
  &lt;h1&gt;HOLAA&lt;/h1&gt;
 &lt;/div&gt;
&lt;script src="jq/jq.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>