Jquery Waypoints basic script not working

Question

i've copied a very basic script from the Jquery Waypoints website, all i want it to do at the moment, is when #header reaches the top of the viewpoint, an alert would pop up.

i've loaded the scripts in this order

<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="waypoints/waypoints.min.js"></script>
<script language="javascript" type="text/javascript" src="jscript.min.js">      </script>

And this is the element that i want to have the waypoint (#header)

<div id="header">
<h1>Header</h1>
</div>

This is the CSS for #header, which is probably not needed for this question

#header {
height:75px;
width:auto;
position:absolute;
background:#212121;
top:50px;
left:200px;
right:100px;
}

And then the very simple jQuery script, which is the same script (with a different element name) from the site http://imakewebthings.com/jquery-waypoints/

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

When i check it on chrome, and scroll past the header, no alert comes up, and no errors are shown in the console. Please help me to understand my mistakes here, Thanks.

Answer 1

I've managed to get it to work by adding a document ready function

so the script would now look like this:

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