jQuery Waypoints won't trigger

Question

I'm trying to use jQuery Waypoints in a website I'm building, but can't get it to trigger at all. Here's my code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script>
        $(document).ready(function(){
            $('#div-a').waypoint(function() {
                console.log("waypoint a reached");
            });
            $('#div-b').waypoint(function() {
                console.log("waypoint b reached");
            });
        });
</script>

I've tried this with and without $(document).ready(function(){. Here's my CSS:

#div-a {
    height: 1000px;
    background-color:#EAEAEA; 
}
#div-b {
    height: 1000px;
    background-color:#D8D5E2; 
}

the divs are filled with placeholder text. The divs are surrounded by a container div with this css:

#container {
    margin: 0;
    height: 100%;
    width: 100%;
    background-color:#8DA7CD;
    overflow:auto;
}

Thank you. All of this is up live at http://wilsonbiggs.com/sandy/

Answer 1

Use the context param this will say to waypoint where is your element scrolled (Search for $('#example-context') to see the context example)

$('#div-a').waypoint(function() {
                console.log("waypoint a reached");
            },{context:"#container"});
$('#div-b').waypoint(function() {
                console.log("waypoint b reached");
            },{context:"#container"});

I added an extra div to you page to test it and it's calling the messaged for each waypoint like this:

<div id="div-a"></div>
<div id="div-b"></div>
<div id="div-c"></div>