要素が表示され、過去にスクロールされていないときにjQueryウェイポイントプラグインを起動するにはどうすればいいですか？

Question

はこれを参照してください：あなたはそれが青色になり最初の赤い長方形を過ぎてスクロールしたときにのみ見ることができるように、私はそれが視野に入る瞬間を青色にしたいと思います

http://jsfiddle.net/5Zs6F/2/

。これは、それを過ぎてスクロールするのに十分なコンテンツがないため、秒が青に変わらない理由です。

HTML：

Scoll this window pane 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<div class="box"></div> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<div class="box"></div> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 

CSS：

.box { width: 250px; height: 100px; border: 2px solid red; } 

のjQuery：

$.getScript('http://imakewebthings.com/jquery-waypoints/waypoints.min.js', function() { 


    $('.box').waypoint(function() { 

     $(this).css({ 
      borderColor: 'blue' 
     }); 

    }); 


}); 

問題の要素が見られ、過去にスクロールされていないとして、どのようにそれは、すぐに火作るために？

Answer 1

offsetオプションは、ウェイポイントが発生させるビューポートの上部との関係を決定します。デフォルトでは0であるため、要素が先頭に当たったときに起動します。あなたが望むのは一般的なので、ウェイポイントには要素全体が表示されたときに発生するオフセットを設定する単純なエイリアスが含まれています。

$('.box').waypoint(function() { 
    $(this).css({ 
    borderColor: 'blue' 
    }); 
}, { offset: 'bottom-in-view' }); 

あなたはそれが下からの要素ののぞき見のときどの部分を発射したい場合は、「100％」に設定する必要があります。

Answer 2

私のためには機能しません。同じ名前のサーバークラスがあり、ページがロードされる/最初の要素が画面上にある場合、それらはすべて変更されます。

jQuery(document).ready(function(){ 

jQuery('.zoomInDownInaktiv').waypoint(function() { 
    //jQuery(this).removeClass('zoomInDownInaktiv'); 
    jQuery(this).addClass('zoomInDown'); 
}, { offset: 'bottom-in-view' }); 

}）;

Answer 3

OK。問題なく動作する解決策を見つけました。

jQuery('.zoomInDownInaktiv').waypoint(function(direction) { 
    if (direction === "down") { 
     jQuery(this.element).removeClass('zoomInDownInaktiv'); 
     jQuery(this.element).addClass('zoomInDown'); 
    } 
}, { offset: '80%' });