修复滚动时Footer Menu切换定位方式引发的闪烁问题

这个闪烁问题我之前也碰到过！核心原因就是你切换position: fixed和relative时，元素从脱离文档流变为占据文档流空间，导致页面高度突然变化，scroll事件被反复触发，形成了类切换的循环，所以才会出现闪烁。

下面给你两种修复方案，优先推荐第二种，更简洁高效：

我们可以给移动端菜单加一个隐藏的占位元素，它的高度和菜单完全一致。当菜单是fixed时占位容器隐藏，切换到relative时显示占位，这样页面高度不会突变：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
<!-- 新增占位容器 -->
<div class="menu-placeholder"></div>
<div class="menu-for-mobile">Footer Menu</div>
<div id="footer">Footer</div>

html, body { margin: 0; padding: 0; }
.container { height: 200vh; background: lightblue; }
.menu-for-mobile {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: lightgreen;
  padding: 3rem;
  text-align: center;
  box-sizing: border-box; /* 确保padding算在元素高度内 */
}
.menu-placeholder {
  height: 0;
  visibility: hidden;
  box-sizing: border-box;
  padding: 3rem; /* 和菜单padding保持一致 */
}
/* 当菜单变为relative时，显示占位容器填充高度 */
.menu-for-mobile.make-relative + .menu-placeholder {
  height: auto;
  visibility: visible;
}
.make-relative { position: relative; }
#footer { padding: 6rem; text-align: center; background: tomato; }

JS部分不需要修改，占位容器会稳定页面高度，scroll事件不会再异常触发。

这个方案从根源解决问题：始终让菜单保持fixed定位，通过transform: translateY()实现向上推送的效果。这样元素不会脱离/进入文档流，页面高度完全不变，自然不会闪烁：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
<div class="menu-for-mobile">Footer Menu</div>
<div id="footer">Footer</div>

html, body { margin: 0; padding: 0; }
.container { height: 200vh; background: lightblue; }
.menu-for-mobile {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: lightgreen;
  padding: 3rem;
  text-align: center;
  box-sizing: border-box;
  transition: transform 0.3s ease; /* 加过渡动画让移动更平滑 */
}
#footer { padding: 6rem; text-align: center; background: tomato; }

$(document).ready(function() {
  let footer = $('#footer');
  let secondary_menu = $('.menu-for-mobile');
  // 提前获取菜单自身高度，避免重复计算
  const menuHeight = secondary_menu.outerHeight();

  $(window).scroll(function() {
    const windowTop = $(this).scrollTop();
    const windowHeight = $(this).height();
    const footerTop = footer.offset().top;
    
    // 计算Footer进入视口的高度：窗口底部超过Footer顶部时，进入的高度为 (窗口顶部+窗口高度) - Footer顶部
    const footerVisibleHeight = Math.max(0, (windowTop + windowHeight) - footerTop);
    // 菜单向上移动的距离，最多不超过自身高度（避免移出视口）
    const moveDistance = Math.min(footerVisibleHeight, menuHeight);

    // 应用transform，负数表示向上移动
    secondary_menu.css('transform', `translateY(-${moveDistance}px)`);
  });
});

这个方案的优势： #

1. 完全避免文档高度变化，scroll事件不会触发循环，彻底解决闪烁问题
2. 通过CSS过渡动画让菜单移动更平滑，提升用户体验
3. 代码逻辑更清晰，不需要切换类，直接计算距离应用样式

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