ページ特定の要素にスクロールするイベント

Question

特定の要素にスクロールするときにアニメーションを実行したい。これはうまくいきます。 しかし、主な問題は、アニメーションが繰り返し実行されることです。アニメーションを1回だけ実行したい。

ここは参考用に使用しているコードです。

HTML

<div>Scroll Down</div> 
<h1 id="scroll-to">I am The H1</h1> 

JS

$(window).scroll(function() { 
    var hT = $('#scroll-to').offset().top, 
     hH = $('#scroll-to').outerHeight(), 
     wH = $(window).height(), 
     wS = $(this).scrollTop(); 
    console.log((hT-wH) , wS); 
    if (wS > (hT+hH-wH)){ 
    alert('you have scrolled to the h1!'); 
    } 
}); 

CSS

div { 
    height:800px; 
    background:red; 
} 


http://jsfiddle.net/n4pdx/ 

Answer 1

設定フラグ際に、特定のdivにユーザーがスクロール。同様に：あなたはすでにスクロールをアニメーション化しているとき

var flag = true; 
$(window).scroll(function() { 

    var hT = $('#scroll-to').offset().top, 
    hH = $('#scroll-to').outerHeight(), 
    wH = $(window).height(), 
    wS = $(this).scrollTop(); 
    console.log((hT-wH) , wS); 
    if (wS > (hT+hH-wH) && flag){ 
    alert('you have scrolled to the h1!'); 
    flag = false; 
    } 
}); 

Answer 2

あなたが旗を置くことができます。ユーザーが上がるとき

var scrolled = false; 

$(window).scroll(function() { 
    var hT = $('#scroll-to').offset().top, 
     hH = $('#scroll-to').outerHeight(), 
     wH = $(window).height(), 
     wS = $(this).scrollTop(); 
    console.log((hT-wH) , wS); 
    if (wS > (hT+hH-wH)){ 
    if(!scrolled){ 
     scrolled = true; 
     alert('you have scrolled to the h1!'); 
    } 
    } 
    else{ 
     scrolled = false; 
    } 
}); 

この例では、私はフラグをリセットします。