如何触发文档结尾300px以上的事件

Question

滚动时，我想在文档结束之前触发300px的事件。

假设我的HTML文档的高度是1000px，窗口视口的高度是600px，滚动100px时，事件应该被触发。

我有这个代码

$(window).scroll(function(){ 
    if ($(window).scrollTop() == $(document).height() - $(window).height()){ 
     callFunction(); 
    } 
}); 

这触发当滚动已经达到底部的事件。所以，我修改了它作为

$(window).scroll(function(){ 
    var height = $(window).height() + 300; 
    if ($(window).scrollTop() == $(document).height() - height){ 
     callFunction(); 
    } 
}); 

但很明显，它似乎是错误的，因为它不工作。请帮忙。

Answer 1

var down = $(window).height() + 300; 
if ($(window).scrollTop() > $(document).height() - down){ 

试试这个

Working demo

Answer 2

我想你所遇到的问题是，scrollTop的永远不会有完全相同你正在寻找正确的像素值。你的数学是正确的，但使用>而不是==，你应该更成功。

$(window).scroll(function(){ 
    var height = $(window).height() + 300; 
    if ($(window).scrollTop() > $(document).height() - height){ 
     callFunction(); 
    } 
}); 

Answer 3

我不得不修改你的脚本一点，但here is an example：

var invoked = false; 
var height = $(document).height() - 300 - $(window).height(); 
$(window).scroll(function(){ 
    if ($(window).scrollTop() >= height && !invoked){ 
     invoked = true; // don't call this twice 
     alert('foo'); 
     callFunction(); 
    } 
});