0

この質問は、この優れた StackOverflow 要素の可視性検出スクリプトに基づいています。

スクロール後に要素が表示されるかどうかを確認する

上記のスクリプトを使用すると、要素がページに表示されていることを (スクロールして) ​​適切に検出し、その後アラートをトリガーすることができます。上記のスクリプトとの違いは、要素が表示されるたびに 1 回だけアラートをトリガーするようにしたいということです。以下の jsFiddle コードでは、要素が表示されている間、マウスまたはスクロールバーをスクロールするたびにアラートがトリガーされ続けます。

http://jsfiddle.net/Berklie/JnFqu/

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function () {
  var myelement = $('#overdueWarning');

  if (isScrolledIntoView(myelement)) {
    alert('Your book is overdue');
  }
});

私が望むのは、要素が表示されたときにアラートが1回だけトリガーされることです...そして、要素が非表示になった場合にのみ、再び表示されます。

他に何か提供できることがあれば教えてください。ありがとうございました！

バークリー

4

1 に答える 1

2

jsFiddle の動作デモ

var shown = false;
$(window).scroll(function () {
    var myelement = $('#overdueWarning');
    if(isScrolledIntoView(myelement)){
        if(!shown){
         console.log('Your book is overdue');
        }
         shown = true;
    }
    else{
     shown = false;
    }
});
于 2013-04-20T21:13:32.363 に答える