javascript - Jquery Waypoints 基本脚本不起作用

Question

我从 Jquery Waypoints 网站复制了一个非常基本的脚本， 我现在想让它做的就是当#header 到达视点顶部时，会弹出一个警告。

我已经按照这个顺序加载了脚本

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

这是我想要有航路点的元素(#header)

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

这是#header 的CSS，这个问题可能不需要

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

然后是非常简单的 jQuery 脚本，它与站点 http://imakewebthings.com/jquery-waypoints/ 中的脚本相同(具有不同的元素名称)

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

当我在 chrome 上检查它并滚动过标题时，没有出现警报，控制台中也没有显示任何错误。 请帮助我理解我的错误， 谢谢。

Answer 1

我已经通过添加文档就绪功能使其正常工作

所以脚本现在看起来像这样:

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