Question

美好的一天，我正在努力教自己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>

Answer 1

尝试使用doc ready handler包装它：

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

Answer 2

Waypoints默认设置是在元素点击顶部视口而不是出现在屏幕时运行该功能。您可以通过传递offset选项来更改该默认行为：

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

当整个元素进入视图时，

'bottom-in-view'将会触发。当元素的任何部分点击视口底部时，'100%'将会触发。

修复Jquery Waypoint

2 个答案: