javascript - how to stop double javascript trigger at the bottm of the page

Question

How to prevent this double triggering at the bottom of the webpage.

Here is the option when you reach 100px from the bottom you see alert message but when you hit bottom you see it too and I only want to see it once even if you hit the bottom of the webpage.

Here is the link:

double triggering

And the code:

 $(window).scroll(function() {   
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("bottom!");
   }
});

EDIT:

Problem is that I am appending multiple divs to the website and I do not have fixed number of them, so that is why I need to check if I have hit the bottom of the page.

Answer 1

您可以设置一个标志来控制此行为：

var alerted = false;
$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        if (!alerted) {
            alert("bottom!");
            alerted = true;
        }
    }
    else alerted = false;
});

http://jsfiddle.net/gWD66/1117/

Answer 2

一般的答案是在事件处理程序触发后简单地删除它。

然而，jQuery 可以通过它的.one()事件处理函数为你做这件事。

Answer 3

尝试这个：

 var beenOnBottom = false;
 $(window).scroll(function() {  

   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       if(!beenOnBottom)
       {
           alert("bottom!");
           beenOnBottom = true;
       }
   }
});

如果您想在再次上升时显示消息，您可以在beenOnBottom超过 100px 值时重新设置变量