如何实现滚动至指定位置显示元素，滚动到footer区域时隐藏该元素？

我来帮你搞定这个问题！你的核心需求是：滚动超过800px时显示.bottomMenu，但当页面滚动到.footer区域时隐藏它，离开footer后再重新显示。咱们先看看你之前的第二段代码为什么没生效——因为它只在页面加载时执行了一次.each()循环，并没有绑定到滚动事件上，所以滚动页面的时候根本不会触发footer的判断逻辑。

下面是完整的解决方案，我会一步步给你解释：

核心思路 #

我们需要在同一个滚动事件处理函数里，同时判断两个关键条件：

1. 当前滚动距离是否超过800px
2. 当前页面是否已经滚动到.footer区域（或者说，页面底部是否接触到footer）

同时为了性能优化，我们会提前缓存footer的位置信息，避免每次滚动都重复查询DOM。

完整代码实现 #

// 缓存DOM元素，避免重复查询
var $bottomMenu = $('.bottomMenu');
var $footer = $('.footer');

// 存储footer和窗口的位置/尺寸信息
var footerTop;
var footerHeight;
var windowHeight;

// 定义函数更新位置信息（初始化和窗口 resize 时调用）
function updateLayoutInfo() {
  footerTop = $footer.offset().top;
  footerHeight = $footer.outerHeight();
  windowHeight = $(window).height();
}

// 初始化时执行一次，获取初始位置
updateLayoutInfo();

// 窗口大小变化时重新计算（比如用户缩放窗口）
$(window).on('resize', updateLayoutInfo);

// 绑定滚动事件处理逻辑
$(document).on('scroll', function() { 
  var scrollTop = $(this).scrollTop();
  // 计算当前页面底部的位置 = 滚动距离 + 窗口高度
  var pageBottom = scrollTop + windowHeight;
  
  // 判断是否应该显示菜单：滚动超过800px，且页面底部还没进入footer区域
  var shouldShowMenu = scrollTop > 800 && pageBottom < footerTop;
  
  // 根据判断结果控制菜单显示/隐藏
  if (shouldShowMenu) {
    // 只有菜单当前是隐藏状态时才执行淡入，避免重复触发动画
    if (!$bottomMenu.is(':visible')) {
      $bottomMenu.fadeIn();
    }
  } else {
    // 只有菜单当前是显示状态时才执行淡出，优化性能
    if ($bottomMenu.is(':visible')) {
      $bottomMenu.fadeOut();
    }
  }
});

代码解释 #

1. 缓存DOM元素：把.bottomMenu和.footer提前缓存到变量里，减少每次滚动时的DOM查询开销。
2. 动态更新位置信息：通过updateLayoutInfo函数获取footer的顶部偏移、高度，以及窗口高度，并且在窗口resize时重新计算，确保窗口大小变化时逻辑依然准确。
3. 滚动事件逻辑：
   • 计算pageBottom（当前页面底部的位置），用来判断是否已经滚动到footer区域
   • 当scrollTop > 800且页面底部还没碰到footer时，显示菜单；否则隐藏菜单
   • 增加了is(':visible')判断，避免重复触发淡入淡出动画，提升流畅度

可选调整 #

如果你希望只要滚动到footer的顶部就隐藏菜单（而不是页面底部碰到footer），可以把判断条件改成：

var shouldShowMenu = scrollTop > 800 && scrollTop < footerTop;

这样菜单会在滚动到footer顶部时立即隐藏，你可以根据自己的需求选择。

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