HTML垂直滚动布局中Div滚动重叠及导航菜单滚动自动关闭的问题解决咨询

我来帮你搞定这两个布局问题，咱们逐个拆解修复：

一、解决两个滑块容器滚动时重叠的问题 #

你的两个.contenedor滑块容器出现重叠，核心原因有两个：

1. .contenido-slider设置了position: relative; top: 60px;，这个偏移会让滑块内容向下超出.contenedor的范围，和下方容器的顶部内容重叠；
2. .nav的z-index: 0层级过低，会导致滑块内容覆盖导航栏，看起来像是导航和滑块重叠。

修复步骤： #

1. 移除多余的top偏移：body已经设置了padding: 90px 20px 0，足够避开顶部固定的导航栏，不需要额外给滑块加top偏移。修改.contenido-slider的CSS：

.contenido-slider {
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-shrink: 0;
  /* 移除 position: relative; top: 60px; */
}

2. 提高导航栏层级：把.nav的z-index调高，确保它始终在页面最上层：

.nav {
  display: flex;
  justify-content: space-between;
  max-width: 992px;
  margin: 0 auto;
  position: fixed;
  z-index: 100; /* 修改为更高的值 */
  top: 0;
  width: 100%;
  max-width: 1000px;
}

3. 可选：调整容器间距：如果需要滑块和上方的<h1>有间距，可以给.contenedor加margin-top: 20px;优化留白。

二、解决滚动时导航菜单自动关闭的问题 #

这个问题基本是JavaScript逻辑导致的，大概率是你添加了滚动事件监听，强制移除了菜单的显示类（.nav-menu_visible），或者是菜单的滚动事件冒泡引发的误触发。

场景1：存在滚动关闭菜单的代码 #

如果你有类似这样的代码，直接删除即可：

// 删掉这段代码
window.addEventListener('scroll', () => {
  navMenu.classList.remove('nav-menu_visible');
});

场景2：无滚动监听但菜单仍自动关闭 #

如果没有上述代码，那可以通过以下方式修复：

1. 提高菜单层级：给.nav-menu添加更高的z-index，避免被其他元素干扰：

.nav-menu {
  flex-direction: column;
  align-items: center;
  margin: 0;
  background-color: #2c3e50;
  position: fixed;
  top: 60px;
  width: 100%;
  padding: 20px 0;
  height: calc(100% - 60px);
  overflow-y: auto;
  left: 100%;
  transition: left 0.3s;
  z-index: 101; /* 添加这一行 */
}

2. 阻止菜单内部点击冒泡：避免点击菜单时触发页面的关闭逻辑：

const navMenu = document.querySelector('.nav-menu');
navMenu.addEventListener('click', (e) => {
  e.stopPropagation();
});

推荐的导航切换完整逻辑 #

确保你的菜单切换代码是这种更合理的写法——只有点击切换按钮或页面其他区域时才关闭菜单，滚动时不会自动关闭：

const navToggle = document.querySelector('.nav-toggle');
const navMenu = document.querySelector('.nav-menu');

// 点击切换按钮展开/收起菜单
navToggle.addEventListener('click', () => {
  navMenu.classList.toggle('nav-menu_visible');
});

// 点击页面其他区域关闭菜单
document.addEventListener('click', (e) => {
  if (!navMenu.contains(e.target) && !navToggle.contains(e.target)) {
    navMenu.classList.remove('nav-menu_visible');
  }
});

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