如何实现横向滚动固定、纵向滚动淡出的导航栏？

纯CSS方案（推荐，无JS依赖） #

核心思路是分离纵向与横向滚动的上下文，让导航栏自然随纵向滚动移出，同时仅内容区域触发横向滚动：

1. 调整布局结构：

<!-- 外层容器，负责页面纵向滚动 -->
<div class="page-container">
  <!-- 导航栏 -->
  <div #navbar class="navbar-fixed">
      <app-header fxLayout="column" class="displayheader"></app-header>
      <app-button-bar fxLayout="column"></app-button-bar>
  </div>

  <!-- 内容滚动容器，仅负责横向滚动 -->
  <div class="content-scroll-wrapper">
    <div id="mainsection" class="mainsection" fxLayout="row" fxFlex>
      <app-sidebar id="sidebar" fxLayout="column" fxFlex="300px"></app-sidebar>
      <div id="content" class="content" fxLayout="column" fxFlex>
        <!-- 你的宽内容 -->
      </div>
    </div>
  </div>
</div>

2. 对应CSS样式：

.page-container {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden; /* 禁止页面级横向滚动 */
}

.navbar-fixed {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff; /* 避免被内容穿透 */
  z-index: 10;
}

.content-scroll-wrapper {
  overflow-x: auto; /* 仅内容区域触发横向滚动 */
  width: 100%;
}

.mainsection {
  min-width: fit-content; /* 让宽内容撑开容器触发横向滚动 */
}

效果：纵向滚动时导航栏随页面上移自然移出视野；横向滚动时仅内容区域滚动，导航栏固定在顶部左侧。

低消耗JS优化方案（适配页面级横向滚动场景） #

如果必须保留整个页面的横向滚动，可通过以下优化解决卡顿问题：

1. 基础CSS设置：

.navbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 10;
  will-change: transform; /* 告诉浏览器提前优化该属性，减少卡顿 */
}

/* 给内容区域加顶部间距，避免被导航栏遮挡 */
.mainsection {
  margin-top: 80px; /* 替换为你的导航栏实际高度 */
}

2. 高性能滚动监听：

const navbar = document.querySelector('.navbar-fixed');
let lastScrollY = window.scrollY;

// 节流函数：减少滚动回调执行频率，降低性能消耗
function throttle(func, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

// 滚动处理逻辑：用transform实现平滑位移
function handleScroll() {
  // 纵向滚动：导航栏随滚动上移，逐渐移出视野
  navbar.style.transform = `translateY(${-window.scrollY}px)`;
  // 横向滚动：导航栏反向位移，视觉上保持固定
  navbar.style.transform += `translateX(${-window.scrollX}px)`;
}

// 绑定节流后的滚动事件（16ms对应60帧刷新率）
window.addEventListener('scroll', throttle(handleScroll, 16));

效果：横向滚动时导航栏视觉固定，纵向滚动时自然上移；通过will-change和节流函数避免卡顿，不会破坏内部元素布局。

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