如何在文档末尾上方 300px 处触发事件

发布于 2024-11-30 05:37:54 字数 550 浏览 1 评论 0原文

滚动时，我想在文档结束前 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();
    }
});

但显然，它似乎是错误的，因为它不起作用。请帮忙。

原文

While scrolling, I want to fire an event 300px before the end of the document.

Say the height of my HTML document is 1000px and the height of the window viewport is 600px, on scrolling 100px down, the event should be fired.

I've this code

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

This fires the event when the scroll has reached the bottom. So I modified it as

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

But obviously, it seems to be wrong since it doesn't work. Please Help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌面超妹 2024-12-07 05:37:55

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

试试这个

工作演示

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

try this one

Working demo

回复收藏 0 原文

骄傲 2024-12-07 05:37:55

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

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

I think the problem you are having is that the scrollTop will never have exactly the right pixel value you are looking for. Your math is correct but use a > instead of == and you should be more successful.

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

回复收藏 0 原文

嗫嚅 2024-12-07 05:37:55

我必须稍微修改一下你的脚本，但是这里有一个例子：

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

I had to modify your script a bit but 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();
    }
});

回复收藏 0 原文

~没有更多了~