我懂你的困扰！之前顶部导航栏没有固定在顶部的时候，侧边栏展开它能跟着页面主体一起滑动，但改成fixed固定定位后就失效了——这是因为fixed定位的元素是相对于浏览器视口定位的，和#main的margin-left变化完全没关系，所以自然不会跟着动。咱们只要做两个小调整就能解决：

第一步：调整HTML结构 #

把.top-bar从#main容器里移出来，让它成为独立的顶层元素，这样我们可以单独控制它的位置：

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="/">Home</a>
  <a href="#">Men's Shoes</a>
  <a href="#">Women's Shoes</a>
  <a href="#">Kid's Shoes</a>
  <a href="#">About Us</a>
  <a href="/faq">FAQ</a>
</div>

<!-- 把top-bar移到main外面，作为独立顶层元素 -->
<div class="top-bar">
  <button class="openbtn" onclick="openNav()">&#9776;</button>
  <div class="logo">
    <img src="img/shoelogo.png" alt="Logo of the shoe shop" style="width:100px; height:auto;">
  </div>
  <a href="/login">
        <button class="user">&#9733;</button>
      </a>
</div>

<!-- 页面主体内容保留在main容器中 -->
<div id="main">
  <div class="faqTitle">
    <h1>FAQ</h1>
  </div>
</div>

第二步：修改JavaScript逻辑 #

在展开和收起侧边栏的函数里，同时给.top-bar设置margin-left，让它和#main同步触发滑动效果：

/* 展开侧边栏，同步设置主体内容和顶部导航栏的左外边距 */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  // 新增：控制顶部导航栏的左外边距
  document.querySelector(".top-bar").style.marginLeft = "250px";
}

/* 收起侧边栏，同步重置主体内容和顶部导航栏的左外边距 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  // 新增：重置顶部导航栏的左外边距
  document.querySelector(".top-bar").style.marginLeft = "0";
}

第三步：优化CSS细节（可选但实用） #

你的现有CSS已经给.top-bar加了transition: margin-left 0.5s ease;，这个过渡动画能保证滑动平滑。我额外加了两个小细节，避免fixed导航栏挡住页面内容：

/* 给main容器添加上内边距，避免内容被fixed导航栏遮挡 */
#main {
  position: relative;
  transition: margin-left .5s ease;
  padding: 20px;
  padding-top: 80px;
  z-index: 10;
}

/* 给top-bar添加上下内边距，让内容布局更宽松 */
.top-bar {
  display: flex;
  align-items: center;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: beige;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: margin-left 0.5s ease;
  padding: 10px 0;
}

/* 其余CSS代码保持你原来的设置即可 */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.openbtn {
  margin-left: 40px;
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
}

.openbtn:hover {
  background-color: #444;
}

.user {
  margin-right: 40px;
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
}

.user:hover {
  background-color: #444;
}

现在你再试试，侧边栏展开收起的时候，顶部导航栏就会和页面主体一起平滑滑动啦！

备注：内容来源于stack exchange，提问作者kburke1