为什么 waypoints 不起作用？

Question

在我的电脑 C 盘上，我创建了一个 test.html 文件，里面有

<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>

我没有收到警报弹出窗口，但 JSFIDDLE 中完全相同的代码工作正常。给出了什么？

Answer 1

Afaik 一些浏览器在简单地双击 .html 文件打开时不会加载外部资源（.js 文件）。请检查您浏览器的 URL 栏中是否有 file://。如果是这样，请在您的计算机上安装 XAMPP（或类似的东西，取决于您的 OS），将您的文件放在 htdocs 下的某个位置，然后重试。

此外，JSFiddle 将您的代码包装在有效的 HTML 文档中。您可以将 <html><head>... 添加到您的 HTML to make it valid。特别是因为您正在处理插件工作可能需要的视口滚动。

最后要说的是 .js 文件的包含顺序很重要，因为它们是按顺序加载的。由于 waypoints 依赖于 jQuery（因为它是一个 jQuery 插件），因此需要加载它 FIRST.

为什么 waypoints 不起作用？

Why is waypoints not working?

javascript

jquery

jquery-waypoints