如何用jQuery实现滚动到指定位置显示元素且页面底部隐藏？

你可以通过计算滚动距离、窗口高度和文档总高度的关系来判断是否到达页面底部，调整后的代码如下：

( function( $ ) {

    $(document).scroll(function() {
        var scrollTop = $(this).scrollTop();
        var windowHeight = $(window).height();
        var documentHeight = $(document).height();
        // 判断是否到达页面底部（可根据需求调整偏移量，比如减20提前触发）
        var isAtBottom = scrollTop + windowHeight >= documentHeight;

        if (scrollTop > 800 && !isAtBottom) {
            $('.sticky-bottom').fadeIn();
        } else {
            $('.sticky-bottom').fadeOut();
        }

    });

} ( jQuery ) );

关键逻辑说明 #

• 没有scrollBottom方法，但可以通过滚动距离 + 窗口可见高度 >= 文档总高度来判断是否到达底部：
  • scrollTop：当前页面向上滚动的距离
  • windowHeight：浏览器窗口的可见高度
  • documentHeight：整个页面的总高度（包括超出窗口的部分）
• 修改后的判断逻辑：只有当滚动距离超过800px，同时还没到达页面底部时，才显示.sticky-bottom元素；其他情况（滚动不足800px，或者已经滚动到底部）都隐藏该元素。

内容的提问来源于stack exchange，提问作者Cray