2013-09-23 20 views
13

要素が〜100pxのオフセットで上にスクロールされているかどうかを確認したい。要素がスクロールされているかどうかチェックする

背景を作るために5つのサブコンテンツと2つのクラスがあるページがあります。それは次のようになります。

<div class="background1"> 
Content1 
</div> 
<div class="background2"> 
Content2 
</div> 
<div class="background1"> 
Content3 
</div> 
<div class="background2"> 
Content4 
</div> 
<div class="background1"> 
Content5 
</div> 

これらのクラスのいずれかが

これをスクロールしてトップに達したときに、今私は、チェックしたいが私の最後のtrysの一つである:

$('.background1', '.background2').position(function(){ 
      if($(this).position().top == 100){ 
      alert('checkThis'); 
     } 
     }); 

は、私はこれを考えますこのコードはdocument.readyにあり、コードの最後にあります....

TLDR:要素がスクロールされているかどうかをチェックする方法?

+1

ウィンドウonscrollイベントは、これは私が検索かについてlloks何を –

答えて

19

あなたはその後、現在のスクロール距離に対する各要素をチェックし、scrollイベントをリッスンする必要があり、のようなもの:

$(window).on('scroll', function() { 
    var scrollTop = $(this).scrollTop(); 

    $('.background1, .background2').each(function() { 
     var topDistance = $(this).offset().top; 

     if ((topDistance+100) < scrollTop) { 
      alert($(this).text() + ' was scrolled to the top'); 
     } 
    }); 
}); 
+0

探しているように思わfor ... ...私は完全にその位置を取得する方法に固定...しかし、そこに行くためにスクロールを忘れた...ありがとう! 8分で受け入れます。 –

+2

'position()'は親に対する要素の位置を取得しますが、私はあなたが 'offset()'を探していると賭けています。またセレクタに注意してください。セレクタは '.background2'の中で' .background1'を探し、両方を選択しません。 – adeneo

+0

驚くばかり!この行は: 'var scrollTop = $(this).scrollTop();' は私が探していたものです。 .offset()のトップ値が全く変化していない理由を理解できませんでした。今は、オフセット値がドキュメントに関連していることがわかります。永続的です。そのため、 '$(window).scrollTop()'の値と比較する必要があります。 –