基于窗口滚动的导航栏定位及侧边栏布局问题求助

一、导航栏滚动效果实现 #

要实现navbar1固定、navbar2滚动消失、navbar3追加至navbar1的效果，通过滚动事件监听+CSS类切换即可完成：

修改后的CSS #

@import url(/00.Asset/Reset-grid-Mquery/bootstrap/css/bootstrap.css);

/*===HEADER===*/
.nav1 {
  background-color: aquamarine;
  height: 150px;
  min-height: 150px;
  width: 100%;
  max-width: 100%;
  top: 0px;
  position: fixed;
  z-index: 100; /* 确保层级最高，不被其他元素遮挡 */
}

.intro {
  background-color: orange;
  height: 150px;
  min-height: 150px;
  width: 100%;
  top: 150px;
  position: relative;
  transition: all 0.3s ease; /* 添加过渡动画，让消失更平滑 */
}

.intro.hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
}

.nav2 {
  background-color: violet;
  height: 150px;
  min-height: 150px;
  width: 100%;
  position: relative;
  top: 150px; /* 初始位置在intro下方 */
}

.nav2.fixed {
  position: fixed;
  top: 150px; /* 固定在navbar1底部 */
  z-index: 99;
}

/*===MAIN===*/
.content {
  padding: 20px;
  height: 100vh;
  margin-top: 450px; /* 初始上边距：nav1+intro+nav2的高度总和 */
  transition: margin-top 0.3s ease;
}

/* 其余CSS保持不变 */

修改后的JS #

window.onscroll = function() {
  const intro = document.querySelector('.intro');
  const nav2 = document.querySelector('.nav2');
  const content = document.querySelector('.content');
  const introOffsetTop = intro.offsetTop;
  const introHeight = intro.offsetHeight;

  // 导航栏逻辑：滚动超过intro区域时切换状态
  if (window.scrollY >= introOffsetTop + introHeight) {
    intro.classList.add('hidden');
    nav2.classList.add('fixed');
    content.style.marginTop = '300px'; // 固定后上边距改为nav1+nav2的高度
  } else {
    intro.classList.remove('hidden');
    nav2.classList.remove('fixed');
    content.style.marginTop = '450px'; // 恢复初始上边距
  }

  // 侧边栏逻辑
  const sidebar = document.getElementById("sidebar");
  const footer = document.getElementById("footer");
  const sidebarParent = sidebar.parentElement;
  const sidebarHeight = sidebar.offsetHeight;
  const scrollPosition = window.scrollY + window.innerHeight;
  const footerPosition = footer.offsetTop;
  const parentBottom = sidebarParent.offsetTop + sidebarParent.offsetHeight;

  // 侧边栏定位逻辑
  if (scrollPosition > footerPosition) {
    // 碰到footer时，固定在footer上方
    sidebar.style.position = 'absolute';
    sidebar.style.top = (footerPosition - sidebarHeight - 20) + 'px'; // 20px为预留间距
  } else if (window.scrollY + sidebarHeight > parentBottom) {
    // 父容器即将不可见时，跟随父容器上移
    sidebar.style.position = 'absolute';
    sidebar.style.top = (parentBottom - sidebarHeight) + 'px';
  } else {
    // 默认固定在视口顶部（避开nav1）
    sidebar.style.position = 'fixed';
    sidebar.style.top = '150px'; // 与nav1底部对齐
  }
};

HTML调整 #

<header class="container-fluid">
  <div class="row row-no-gutters"> <!-- 修正原代码的<row>为标准Bootstrap行结构 -->
    <nav class="nav1">
      <h1>Nav1</h1>
    </nav>
    <div class="intro">
      <h1>Intro（需求中的navbar2）</h1>
    </div>
    <nav class="nav2">
      <h1>Nav2（需求中的navbar3）</h1>
    </nav>
  </div>
</header>
<!-- 其余HTML保持不变 -->

二、侧边栏高度控制与滚动定位 #

关键CSS修改 #

.sidebar {
  position: fixed;
  top: 150px; /* 初始位置避开nav1 */
  right: 0;
  width: 100%;
  max-width: 100px;
  max-height: calc(100vh - 170px); /* 视口高度减去nav1高度和内边距，避免溢出 */
  background-color: #f4f4f4;
  padding: 20px;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow-y: auto; /* 内容超出时显示滚动条 */
}

侧边栏逻辑说明 #

1. 计算侧边栏父容器的底部位置，当滚动到父容器即将离开视口时，将侧边栏改为绝对定位，固定在父容器底部
2. 当滚动到footer区域时，调整侧边栏位置，避免覆盖footer
3. 初始固定位置设置为top:150px，确保不会被navbar1遮挡

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