如何仅在页面滚动时显示右侧菜单？解决移动端内容重叠问题

嘿，这个需求我之前也碰到过，单纯监听scroll事件不仅触发太频繁影响性能，而且你现有代码的逻辑（基于scrollTop位置显示/隐藏）和你想要的「滚动期间显示、停止后隐藏」也不太匹配。给你分享几个更贴合需求的方案：

防抖函数的作用是：在滚动停止后的指定时间内才执行隐藏操作，滚动过程中会不断重置定时器，这样菜单在滚动时会一直显示，停止后延迟消失，同时还能减少函数执行次数，提升性能。

// 先定义防抖工具函数
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

// 获取菜单元素
const menu = $('.a');

// 滚动开始时立即显示菜单
$(window).scroll(function() {
  menu.fadeIn();
});

// 滚动停止300毫秒后隐藏菜单（可根据需求调整延迟时间）
const hideMenuOnStop = debounce(function() {
  menu.fadeOut();
}, 300);

// 绑定防抖后的隐藏逻辑到滚动事件
$(window).scroll(hideMenuOnStop);

requestAnimationFrame是浏览器专为动画优化的API，能让菜单的显示/隐藏操作在浏览器下一次重绘时执行，比普通定时器更流畅，减少卡顿感：

const menu = $('.a');
let scrollTimeout;

// 显示菜单的逻辑
function showMenu() {
  if (!menu.is(':visible')) {
    menu.fadeIn();
  }
}

// 隐藏菜单的逻辑，用requestAnimationFrame包裹
function hideMenu() {
  window.requestAnimationFrame(() => {
    menu.fadeOut();
  });
}

$(window).scroll(function() {
  showMenu();
  // 每次滚动都清除之前的定时器
  clearTimeout(scrollTimeout);
  // 滚动停止300毫秒后触发隐藏
  scrollTimeout = setTimeout(hideMenu, 300);
});

如果你想摆脱jQuery的依赖，这个方案更轻量，用CSS过渡实现淡入淡出效果，性能也更好：

首先加CSS样式：

.a {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* 保留你原来的菜单定位样式 */
}

.a.show {
  opacity: 1;
  visibility: visible;
}

然后写原生JS逻辑：

const menu = document.querySelector('.a');
let scrollTimer;

window.addEventListener('scroll', () => {
  // 滚动时添加show类显示菜单
  menu.classList.add('show');
  // 清除之前的定时器
  clearTimeout(scrollTimer);
  // 滚动停止300毫秒后移除show类隐藏菜单
  scrollTimer = setTimeout(() => {
    menu.classList.remove('show');
  }, 300);
});

小提示 #

你原来的代码是基于scrollTop > 100来显示菜单，这和你想要的「只要滚动就显示」的需求不符，上面的方案都调整了逻辑：不管滚动到页面哪个位置，只要开始滚动就显示菜单，停止滚动后延迟隐藏，完全贴合你的需求。

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