javascript - 如果元素完全在视口中，则执行功能（实时）

Question

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

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

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

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

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

（另外，它使用的是 bind 方法，所以有点过时了..）

所以，这可能很简单，但我没有让它工作。

我是 jQuery 和 javascript 的新手，所以.. 它可能非常简单。

这是包含代码和所有内容的网站

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

Answer 1

从这里

jQuery - 滚动停止上的绑定事件

$.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 毫秒，并传入函数。

因此，当滚动移动时，它总是清除该功能的运行并将其重置为“一点点”运行。

当滚动停止时 - 然后它无法清除该功能，因此该功能执行。

可爱的把戏。