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用一个容器div包围着这个css：

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

谢谢。所有这些都在http://wilsonbiggs.com/sandy/

上线

Answer 1

使用context参数来表示你的元素在哪里滚动（搜索$（'＃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>

jQuery Waypoints不会触发

1 个答案: