I am encountering an issue with using jQuery Waypoints on a website I am currently developing. Despite my efforts, I cannot seem to get it to trigger at all. Below is the code I have implemented:
<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("Reached waypoint a");
});
$('#div-b').waypoint(function() {
console.log("Reached waypoint b");
});
});
</script>
I have tried executing this with and without $(document).ready(function(){. Here is the CSS associated with the code:
#div-a {
height: 1000px;
background-color:#EAEAEA;
}
#div-b {
height: 1000px;
background-color:#D8D5E2;
}
The divs are populated with placeholder text and are encompassed by a container div styled with the following CSS:
#container {
margin: 0;
height: 100%;
width: 100%;
background-color:#8DA7CD;
overflow:auto;
}
Your assistance in resolving this matter would be greatly appreciated. The entire setup can be viewed live at