ユーザーがページの特定の部分をスクロールしたときのjQueryトリガーアクション

ちょっと、ユーザーがページ上の特定の場所をスクロールするときにjQueryアクションが必要です。これはjQueryでも可能ですか？私はjQuery APIの.scrollを見てきましたが、これは私が必要と考えるものではありません。ユーザーがスクロールするたびに起動しますが、ユーザーが特定の領域を通過したときに起動する必要があります。ユーザーがページの特定の部分をスクロールしたときのjQueryトリガーアクション

出典

2011-01-07 JJ Nold

jqueryの中

$(window).on('scroll', function() { 
    var y_scroll_pos = window.pageYOffset; 
    var scroll_pos_test = 150;    // set to whatever you want it to be 

    if(y_scroll_pos > scroll_pos_test) { 
     //do stuff 
    } 
});

http://jsfiddle.net/babumxx/hpXL4/

出典

2011-01-07 15:47:11 jondavidjohn

Iは $（ "ヘッダ、フッタ"）とそれをテスト（{backgroundColorの "＃1 fd9c3d"}、1200）アニメート。 if文で動作していないと思われる –

ifステートメントの内側と外側でイベントが発生しているかどうかをテストするアラートを設定するだけです。 – jondavidjohn

ウェイポイントは、私はjondavid年代修正した単一ページに一度だけ任意のアクションを発射するには、それを http://imakewebthings.github.com/jquery-waypoints/

出典

2011-10-10 11:33:09 chris

視差のある単一ページのスクロールアプリでwaypoints.jsを使用しました。優れた作品。私があなたに与えることができる1つのヒントは、ウェイポイントのリンクを使用することです。可視性を非表示に設定します。絶対位置を使用してウェイポイントの高さを設定することができます。 Screen 1-1。 – mbokil

を行う必要があります）（.scroll jqueryのイベントを使用しますスニペットを次のように入力します。

jQuery(document).ready(function($){ 

    $triggered_times = 0; 

    $(window).on('scroll', function() { 

      var y_scroll_pos = window.pageYOffset; 
      var scroll_pos_test = 150; // set to whatever you want it to be 

      if(y_scroll_pos > scroll_pos_test && $triggered_times == 0) { 

       //do your stuff over here 

       $triggered_times = 1; // to make sure the above action triggers only once 

      } 
    }); 

})

ここでは、作業コードスニペットの例を確認できます。

jQuery(document).ready(function($){ 
 

 
\t \t $triggered_times = 0; 
 

 
\t \t $(window).on('scroll', function() { 
 
\t \t \t \t var y_scroll_pos = window.pageYOffset; 
 
\t \t \t \t var scroll_pos_test = 150; // set to whatever you want it to be 
 

 
\t \t \t \t if(y_scroll_pos > scroll_pos_test && $triggered_times == 0) { 
 
\t \t \t \t \t alert('This alert is triggered when y_scroll_pos = 150') 
 
\t \t \t \t \t $triggered_times = 1; // to make sure the above action triggers only once 
 
\t \t \t \t } 
 
\t \t }); 
 

 
\t })

p { 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<p>scroll this block to get the result</p> 
 
</body>

出典

2015-08-26 05:13:26

なぜ 'document.ready'関数に' $ 'シンボルがありますか？私はそれを動作させるか、それ以外の場合は動作しません。理由？ @Mursaleen – Rehan

実際には '$'はWordPressのように定義されていませんが、そこには 'jQuery'が定義されています。だから、 'function（$）{...} 'に置くことは' $ = jQuery'を意味します。そのため、上記のコードから '$'記号を削除すると、動作しなくなることがあります。 –

私は今それを得る。ありがとう – Rehan

ユーザーがページの特定の部分をスクロールしたときのjQueryトリガーアクション

答えて

関連する問題