スクロールを1回だけ表示する

Question

タイトルのとおりです！私はスクロールにこのdivを表示させていますが、私はコードを持っていますが、アクションを1回だけ実行します。私がdivを閉じる（それは警告です）と再び下にスクロールすることにしたら、再び起こりません。どうすればこれを達成できますか？

私は見つけることができるすべてを読んだことがありますが、私は初心者なので、理解するのはあまりにも混乱していました。

とにかく、ここに私のコードは、これまでのところです：

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 100) { 
     $('#alert').fadeIn(); 
    } 
}); 

私はこれに追加するには何が必要ですか？ ありがとうございました！

Answer 1

フラグ変数が既に設定されているかどうかを確認するためにフラグ変数を設定した場合。変数名の競合を避けるには、.dataを使用します。

$(document).scroll(function() { 
 
    var y = $(this).scrollTop(); 
 
    if (y > 100 && !$(this).data("once")) { 
 
     $('#alert').fadeIn(); 
 
     $(this).data("once", true); 
 
     console.log("invoked once"); 
 
    } 
 
});

body { 
 
    height:700px; 
 
} 
 
#alert { 
 
    bottom:70px; 
 
    position:fixed; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="alert">test</div>

Answer 2

あなたはtrueまたはfalseのいずれかを返す変数を作成することができ、ここでの例です：

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    var scrolled = false; 
    if (y > 100 && !scrolled) { 
     scrolled = true; 
     $('#alert').fadeIn(); 
    } 
});