On My computer C drive, I created a test.html file and inside it I have
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#waypoint').waypoint(function() {
alert('You have scrolled to my waypoint.');
}, {
offset: '100%'
});
});
</script>
<div id="waypoint">WAYPOINT</div>
I don't get the alert popup, yet the exact same code in JSFIDDLE works fine. What gives?
Afaik some browsers don't load external resources (
.jsfiles) when simply opended by double clicking the.htmlfile. Please check, whether there'sfile://in your browser's URL bar. If so, install XAMPP (or something similar, depending on your OS) on your machine, put your file somewhere underhtdocsand retry.Also JSFiddle wraps your code in a valid HTML Document. You might add
<html><head>...to your HTML to make it valid. Especially since you're dealing with viewport scrolling that might be required for the plugin to work.Last to be said is that the include order of your
.jsfiles matter, since they're loaded in order. Since waypoints depends on jQuery (as it is a jQuery plugin) it needs to be loaded FIRST.