修复Jquery Waypoint

Question

好的，我正在努力教自己Jquery方法点，现在我很难让它工作起来。这个想法是，一旦元素在屏幕上可见，它就会显示一个“警报”，上面写着“这个元素是可见的”。但每当我向下滚动时，警报似乎就不会出现。下面是我的代码示例。

<section class="container">
    <div class="sixteen columns item"></div>
    <div class="sixteen columns item"></div>
    <div class="sixteen columns item"></div>
    <div class="sixteen columns item"></div>
    <div class="sixteen columns item"></div>
    <div class="sixteen columns item"></div>
    <div class="sixteen columns item"></div>
    <div class="sixteen columns item"></div>
    <div class="sixteen columns item"></div>
    <div class="sixteen columns item thing entry" id="example-basic"></div>
</section>

如果我将这个部分放在其他部分上，它似乎正在工作，并且显示了警报。

<div class="sixteen columns item thing entry" id="example-basic"></div>

Javascript

<script>
$('.entry').waypoint(function() {
   alert('The element appeared on the screen.');
});
</script>

Answer 1

尝试用包装它：

<script>
   $(function(){
      $('.entry').waypoint(function() {
         alert('The element appeared on the screen.');
      });
   });
</script>

Answer 2

默认的方法是，当元素到达viewport的顶部时运行函数，而不是在屏幕上显示。可以通过传递offset选项来更改该默认行为：

$('.entry').waypoint(function() {
  alert('The element appeared on the screen.');
}, {
  offset: 'bottom-in-view' // or '100%'
});

当看到整个元素时，'bottom-in-view'就会启动。当元素的任何部分到达视口底部时，'100%'都会触发。