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永远不会有你想要的正确像素值。你的数学是正确的，但使用＆gt;而不是==而你应该更成功。

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

如何在文档末尾300px之外触发事件

3 个答案: