Question

这个问题基于这个出色的StackOverflow元素可见性检测脚本：

Check if element is visible after scrolling

使用上面的脚本，我能够正确检测页面上的元素何时可见（通过滚动到它），随后触发警报。我无法从上面的脚本编写代码的区别在于，我希望每次元素可见时警报只触发一次。使用下面的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');
  }
});

我想要的是警报仅在元素变为可见时触发一次......然后再次仅如果元素变得不可见，然后再次可见。

如果我能提供其他任何信息，请告诉我。谢谢！

Berklie

Answer 1

jsFiddle Working Demo

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;
    }
});

jQuery：当元素在页面上可见时，每次触发函数只有一次

1 个答案: