Jquery Waypoints基本脚本不起作用答案

【问题标题】：Jquery Waypoints basic script not workingJquery Waypoints基本脚本不起作用
【发布时间】：2014-03-15 10:56:50
【问题描述】：

我从 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 上检查它并滚动到标题时，没有警报出现，控制台中也没有显示任何错误。请帮助我理解我在这里的错误，谢谢。

【问题讨论】：

那是因为，标题已经在视口的顶部。
它距顶部 50 像素，我有向下滚动的文本，以便标题位于顶部。

标签： javascript jquery html css jquery-waypoints

【解决方案1】：

我已经设法通过添加一个文档就绪功能让它工作

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

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

【讨论】：