修复 Jquery Waypoint答案

【问题标题】：Fixing Jquery Waypoint修复 Jquery Waypoint
【发布时间】：2014-02-11 10:09:19
【问题描述】：

美好的一天，我正在尝试自学 Jquery 航路点，但现在我在尝试使其正常工作时遇到了麻烦。这个想法是一旦元素在屏幕上可见，它就会显示一个“警报”，说“这个元素是可见的”。但是每当我向下滚动时，警报似乎都不会出现。这是我的代码示例。

HTML

<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>

【问题讨论】：

好的，但问题是什么？我想你忘了提。
编辑我的帖子并添加问题:)

标签： javascript jquery html css jquery-waypoints

【解决方案1】：

尝试用文档就绪处理程序包装它：

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

【讨论】：

【解决方案2】：

Waypoints 默认是在元素到达视口顶部时运行函数，而不是出现在屏幕上。您可以通过传递 offset 选项来更改该默认行为：

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

'bottom-in-view' 将在整个元素出现时触发。 '100%' 将在元素的任何部分到达视口底部时触发。

【讨论】：