如果元素完全位于视口中，则执行函数（实时）

Question

我试图使用jQuery插件within viewport来检测元素是否在视口中。

它可以工作，但不会更新。

他推荐ScrollStop。我添加它，但它不起作用。

我只是把我的代码在这里：

$(document).ready(function() { 
    $(window).bind("resize scrollStop", function() { 
$("div").withinViewport().append("<span>hi</span>"); 
}); 
}); 

（加，它使用的绑定方法，所以这是一个有点过时..）

因此，它可能是简单的，但我没有”让它工作。

我是新来的jQuery和JavaScript所以..它可能超级简单。

Here's the website with the code and everything

编辑：适用于调整大小！但不能滚动。

Answer 1

从这里

jQuery - bind event on Scroll Stop

$.fn.scrollStopped = function(callback) {   
     $(this).scroll(function(){ 
      var self = this, $this = $(self); 
      if ($this.data('scrollTimeout')) { 
       clearTimeout($this.data('scrollTimeout')); 
      } 
      $this.data('scrollTimeout', setTimeout(callback,250,self)); 
     }); 
    }; 

$(window).scrollStopped(function(){ 
    $("div").withinViewport().append("<span>hi</span>"); 
}); 

如何工作的。

该功能首先清除与数据元素scrollTimeout相关的任何超时。

它想用250毫秒，在传递的函数超时创建新的元素出现。

因此，当滚动移动它总是从运行和重置它在一点点运行”清除功能”。

当滚动停止 - 那么它不能清除函数，所以函数执行。

可爱的把戏。