当元素 id 在视口中并出现 jquery 时发出警报

Question

无法让这个插件为我工作：https://github.com/morr/jquery.appear

使用 Ajax 从这个 CDN 引用插件：http://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js

我做错了什么？当 div id #footer 在视口中时，我想要一个警报。

$.ajax({
  url: '//cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js',
  dataType: 'script',
  cache: true,
  success: function() {
    $("#footer").appear(function() {
            alert('I see a footer!');
        });
  }
});

Answer 1

使用我实现的插件的 demo page 使其工作。

首先使页脚元素在视口上可见时能够触发 'appear' 事件：
```
$("#footer").appear();
```

然后像这样监听事件：

$("body").on("appear", "#footer", function() {
    // Do something...
});

代码片段：

$.ajax({
  url: '//cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js',
  dataType: 'script',
  cache: true,
  success: function() {
    $("#footer").appear();

    $("body").on("appear", "#footer", function() {
      alert('I see a footer!');
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height: 300px">Scroll down</div>
<div id="footer">Footer</div>

当元素 id 在视口中并出现 jquery 时发出警报

Alert when element id is in viewport with jquery appear

javascript

ajax

jquery

jquery-plugins

viewport