jQuery Waypoints不会触发

Question

我正在尝试在我正在构建的网站中使用jQuery Waypoints,但根本无法触发它.这是我的代码:

<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("waypoint a reached");
            });
            $('#div-b').waypoint(function() {
                console.log("waypoint b reached");
            });
        });
</script>

我有没有试过这个$(document).ready(function(){.这是我的CSS:

#div-a {
    height: 1000px;
    background-color:#EAEAEA; 
}
#div-b {
    height: 1000px;
    background-color:#D8D5E2; 
}

div包含占位符文本.div用这个css包围一个容器div:

#container {
    margin: 0;
    height: 100%;
    width: 100%;
    background-color:#8DA7CD;
    overflow:auto;
}

谢谢.所有这一切都在http://wilsonbiggs.com/sandy/上线

Answer 1

使用上下文参数,这将说明你的元素在哪里滚动(搜索$('#example-context')以查看上下文示例)

$('#div-a').waypoint(function() {
                console.log("waypoint a reached");
            },{context:"#container"});
$('#div-b').waypoint(function() {
                console.log("waypoint b reached");
            },{context:"#container"});

我在你的页面上添加了一个额外的div来测试它,它正在为每个路点调用messaged,如下所示:

<div id="div-a"></div>
<div id="div-b"></div>
<div id="div-c"></div>