jquery - 根据距窗口底部的距离运行 jQuery

Question

当您到达屏幕底部或附近时，我正在尝试使元素淡入。

我目前的问题是，只有当您绝对位于屏幕上的最后一个像素时，脚本才会运行。例如，如果向上 3 像素，则动画将不会显示，并且会留下空白区域。

$(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $('#contact-form').css('opacity','1');
        }
    });

如果距离底部 x 像素，我想让动画开始。 x 将由 div 的高度确定。所以:

var x = $('#contact-form').height();

当用户滚动到距离页面底部 x px 时，如何启动 jQuery？

Answer 1

ThePendulum 来自#web 这里!

从顶部滚动的距离可以通过$(document).scrollTop()计算出来。要获得相对于文档底部滚动的距离，可以用文档的高度减去从文档顶部滚动的距离。

$(document).height() - $(document).scrollTop();

但是，一旦 View 框架的底部碰到文档的底部，浏览器就会停止滚动。然后，您只需滚动到文档顶部与 View 框架顶部之间的距离。

要获取文档底部与 View 框架底部之间的距离，还必须从滚动距离中减去 View 框架的高度。

Math.floor($(document).height() - $(document).scrollTop() - $(window).height());

然后，您可以简单地在滚动时检查此值，并在距离底部一定距离处触发您希望发生的任何事情。

$(document).on('scroll', function() {
    var distanceFromBottom = Math.floor($(document).height() - $(document).scrollTop() - $(window).height());

    if(distanceFromBottom < 200) {
        // We're less than 200 pixels away from the bottom!
    }
});

工作演示: http://jsfiddle.net/ThePendulum/vwmh8o38/