0

我正在尝试将一个类添加到.column视口中该类的所有实例中。

这个 JS Fiddle.swoosh为视口中的所有内容添加了一个类.column，但是当我在我的标记中使用相同的 js 时，它不会将该.swoosh类添加到.column视口中。

  1. 我检查了 jquery 是否正在加载，它是。
  2. 该代码有效，因为它适用于 JS Fiddle

但是由于某种原因，此页面.column的视口中的 没有获得 class 。.swoosh

这里又是 JS Fiddle。

这里又是实况页面。

这是我试图运行的代码：

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();
});
4

2 回答 2

2

您的页面上没有包含 jQuery。在控制台中：'Uncaught ReferenceError: $ is not defined'。您可以通过将以下内容添加到您的链接到 google cdn 副本<head>：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
于 2013-07-07T20:18:22.190 回答
1

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

$(document).ready(function() {

})
于 2013-07-07T20:14:10.913 回答