0

.columnビューポートにあるクラスのすべてのインスタンスにクラスを追加しようとしています。

この JS Fiddle.swooshは、ビューポート内のすべてにクラスを追加しますが、マークアップでまったく同じ js を使用すると、クラスがビューポート内に.column追加されません。.swoosh.column

  1. jqueryがロードされているかどうかを確認しましたが、そうです。
  2. コードは JS Fiddle で動作するため有効です

しかし、何らかの理由で、このページ.columnのビューポートの はクラスを取得していません。.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: $ が定義されていません」。に以下を追加することで、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 に答える