2016-04-17 11 views
0

これは非常に簡単なものです - スクロールで特定のクラス名の画像が画面に表示されることを検出する非常に基本的なスクリプトを作成しました。画像が表示されると、クラスが追加され、不透明度および移動CSSアニメーションがトリガされます。jQuery関数から簡単にjQuery関数をそれぞれに変換する際に問題が発生しました

これはうまくいきますが、同じページ上の複数の画像でこの機能を使用したいと考えています。私はeach()をスクロール関数の内側と外側の両方で使用しようとしましたが、それはスクリプトを壊します。私は正しい軌道に乗っていると信じていますが、画面に表示される画像を検出するために使用される変数は、私が通常each()関数で使用する$(this)を使用できないため、私を捨ててしまいます。

jQueryのスクリプトはここにある:元、機能スクリプトの

// Setup 
    $(".appear").addClass("off"); 

    objectOffset = $(".appear").offset().top; 
    winHeight = $(window).height(); 
    trigger = objectOffset - winHeight; 

    $(window).scroll(function() { 
    if ($(window).scrollTop() > trigger) { 

     $(".appear").removeClass("off"); 
     $(".appear").addClass("on"); 

    } 

    }); 

JSフィドル(最初の画像だけで動作します):

https://jsfiddle.net/gv6qzxph/

多くのおかげでみんな。含ま壊れた試みに編集

// Setup 
    $(".appear").addClass("off"); 

    $(".appear").each(function() { 

    objectOffset = $(this).offset().top; 
    winHeight = $(window).height(); 
    trigger = objectOffset - winHeight; 

    $(window).scroll(function() { 
     if ($(window).scrollTop() > trigger) { 

     $(this).removeClass("off"); 
     $(this).addClass("on"); 

     } 

    }); 

    }); 

答えて

0

あなたの最初の試みでは、あなたは、あなたの最初の<div>のためのトリガーを定義しています。 2回目の試行では、ループ内でスクロールをバインドしようとしていますが、パフォーマンスがむしろ低下しています。必要なのは、スクロールしたときに要素が可視であるかどうかを確認することです。 https://jsfiddle.net/swnuro9z/1/

乾杯

+0

パーフェクト、。そして、私のエラーも明確にしてくれてありがとう。 –

1

ないあなたは本当にこの改善を必要とすることを確認:

// Setup 
    $(".appear").addClass("off"); 

    $(window).scroll(function() { 

     $('.appear').each(function() { 
      if(isVisible(this)){ 
       $(this).removeClass('off').addClass('on'); 
      } 
     }); 

    }); 

    function isVisible(elem) { 
    var $elem = $(elem); 
    var $window = $(window); 

    var elemTop = $elem.offset().top; 
    var docViewTop = elemTop - $window.height(); 

    return $window.scrollTop() > docViewTop; 
    }; 

そしてここjsfiddle作業以下の作業バージョンを見つけてください。いずれにせよ、私は時間があり、それと遊んでいた:)そしてここにそれがある。

  1. jQueryを使用すると、クラスを使用せずに表示/非表示できます。
  2. スクロールアップ時にHIDE(不透明度に戻る:0)。

    $(window).scroll(function(){ 
        var winHeight = $(window).height(); 
        var scrollTop = $(window).scrollTop(); 
    
        $('.appear').css('opacity',function(){   // change opacity only on the 'appeared' items 
         elmTop  = $(this).offset().top; 
         scrollNeeded = elmTop - winHeight;   // scrolling needed for $(this) to appear  
         return (scrollTop > scrollNeeded)? 1 : 0 ; // if $(this) appear on the screen return 1 else 0 
        }); 
    

    });きれい

See Demo

+0

これは役に立ちます、おかげさまで、私は効果を繰り返す最良の方法を考えていましたが、実装では各画像に1回だけトリガさせることに固執します。ありがとう。 –

関連する問題