Javascript .addClass（）在JS Fiddle之外不工作

我正在尝试向视口中的

.column

类的所有实例添加一个类

将类

.swoosh

添加到视口中的所有

.column

中，但当我使用与标记相同的确切js时，它不会将

.swoosh

类添加到视口中的

.column

我检查了jquery是否正在加载，它是否正在加载

代码是有效的，因为它在JS Fiddle上工作

但由于某些原因，中视口中的

.column

未获取类

.swoosh

以下是我尝试运行的代码：

function isElementInViewport(el) {
var rect = el.getBoundingClientRect();

return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document. documentElement.clientWidth)
    );
}

$.fn.checkViewportAndSetClass = function() {
  $(this).each(function(){
     if (isElementInViewport(this)) {
      $(this).addClass("swoosh");
    } 
  });
 };
$('.column').checkViewportAndSetClass();

 $(window).on("scroll", function() {
    $('.column').checkViewportAndSetClass();
});

函数IsElementViewPort（el）{
var rect=el.getBoundingClientRect（）；
返回(
rect.top>=0&&
rect.left>=0&&
rect.bottom您没有在活动页面中加载jquery库。此外，您应该将代码包装在

$(document).ready(function() {

})

您没有在live页面中加载jquery库。此外，您应该将代码包装在

$(document).ready(function() {

})

您的页面上没有包含jQuery。在控制台中：“未捕获引用错误：$未定义”。您可以通过将以下内容添加到
链接到google cdn副本：

您的页面上没有包含jQuery。在控制台中：“未捕获引用错误：$未定义”。您可以通过将以下内容添加到您的
链接到google cdn副本：


$（文档）.ready（）在这种情况下是不必要的，因为事件正在绑定到窗口。视口中的所有
.column
实例仍然没有获得
.swoosh
类。检查指向我的live页面的链接，我添加了jQuery并加载它。我只是再次查看，当我在chrome a中查看链接时，我可以看到元素上的“swoosh”类使用chrome的开发工具，它说没有添加
.swoosh
类。这是我在开发工具中看到的：哦，糟糕，你是否期待第一次调用
checkViewportAndSetClass
来设置类？它可能在你滚动窗口之前不起作用，因为元素在页面上被动画化了。所以我猜
 如果（IsElementViewPort（this））
将在执行该行代码时返回false。请尝试在调用
checkViewportAndSetClass
$（文档）之前等待动画完成。ready（）在这种情况下是不必要的，因为事件正在绑定到窗口。视口中的所有
.column
实例仍然没有获得
.swoosh
类。检查指向我的live页面的链接，我添加了jQuery并加载它。我只是再次查看，当我在chrome a中查看链接时，我可以看到元素上的“swoosh”类使用chrome的开发工具，它说没有添加
.swoosh
类。这是我在开发工具中看到的：哦，糟糕，你是否期待第一次调用
checkViewportAndSetClass
来设置类？它可能在你滚动窗口之前不起作用，因为元素在页面上被动画化了。所以我猜
 如果（IsElementViewPort（本））执行该行代码时，
将返回false。请尝试等待动画完成后再调用
checkViewportAndSetClass
现在，我正在加载jquery，但它仍然不工作。再次检查live页面。现在，我正在加载jquery，但它仍然不工作。再次检查live页面。