求助：实现滚动时Navbar转为Sidebar效果（参考Bechtle网站）

核心思路 #

实现滚动时导航栏转侧边栏，核心是监听页面滚动事件，根据滚动距离切换导航栏的布局样式，结合CSS过渡动画保证切换流畅度。

步骤实现 #

1. 结构调整 #

梳理导航栏核心元素（品牌Logo、导航菜单、搜索框、登录入口），整合到统一容器中，区分导航栏模式与侧边栏模式的结构：

<!-- 导航容器 -->
<div class="navbar-container">
  <!-- 品牌区域 -->
  <div class="navbar-brand">
    <img src="/assets/logo.png" alt="品牌Logo">
  </div>
  <!-- 导航菜单 -->
  <ul class="nav-menu">
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
  </ul>
  <!-- 搜索与登录区域 -->
  <div class="navbar-actions">
    <form class="navbar-search d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search...">
    </form>
    <div class="login-entry">
      <img src="/assets/connexion.jpg" alt="登录入口">
    </div>
  </div>
  <!-- 侧边栏触发按钮 -->
  <button class="sidebar-toggle">☰</button>
</div>
<!-- 侧边栏容器 -->
<div class="sidebar-container">
  <div class="sidebar-header">
    <img src="/assets/logo.png" alt="品牌Logo">
    <button class="sidebar-close">×</button>
  </div>
  <ul class="sidebar-menu">
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
  </ul>
  <form class="sidebar-search" role="search">
    <input class="form-control" type="search" placeholder="Search...">
  </form>
</div>

2. CSS样式设置 #

用滚动触发类和媒体查询控制两种模式的显示逻辑：

/* 基础导航栏样式 */
.navbar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 24px;
  margin: 0;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.navbar-search input {
  width: 300px;
  height: 36px;
}

.login-entry img {
  height: 72px;
  width: 72px;
}

.sidebar-toggle {
  display: none;
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
}

/* 滚动后导航栏收缩 */
.navbar-container.scrolled {
  height: 56px;
}

.navbar-container.scrolled .nav-menu {
  display: none;
}

.navbar-container.scrolled .sidebar-toggle {
  display: block;
}

.navbar-container.scrolled .login-entry img {
  height: 56px;
  width: 56px;
}

/* 侧边栏样式 */
.sidebar-container {
  position: fixed;
  top: 0;
  left: -320px;
  width: 320px;
  height: 100vh;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0,0,0,0.1);
  transition: left 0.3s ease;
  padding: 16px;
}

.sidebar-container.open {
  left: 0;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin-bottom: 32px;
}

.sidebar-menu li {
  margin-bottom: 16px;
}

.sidebar-search input {
  width: 100%;
  height: 36px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .navbar-search input {
    width: 200px;
  }
}

3. JavaScript逻辑 #

实现滚动监听、侧边栏展开/关闭交互：

const navbar = document.querySelector('.navbar-container');
const sidebar = document.querySelector('.sidebar-container');
const sidebarToggle = document.querySelector('.sidebar-toggle');
const sidebarClose = document.querySelector('.sidebar-close');

// 滚动事件监听
window.addEventListener('scroll', () => {
  navbar.classList.toggle('scrolled', window.scrollY > 50);
});

// 侧边栏展开/关闭
sidebarToggle.addEventListener('click', () => {
  sidebar.classList.add('open');
});

sidebarClose.addEventListener('click', () => {
  sidebar.classList.remove('open');
});

// 点击外部关闭侧边栏
document.addEventListener('click', (e) => {
  if (sidebar.classList.contains('open') && !sidebar.contains(e.target) && e.target !== sidebarToggle) {
    sidebar.classList.remove('open');
  }
});

4. 现有代码优化 #

你提供的搜索表单可整合到上述结构中，移除内联样式改用CSS类控制，避免样式冗余。

关键注意点 #

• 使用CSS过渡动画保证切换流畅，避免生硬跳转
• 滚动触发阈值（如scrollY > 50）可根据需求调整
• 侧边栏需处理点击外部关闭的交互，提升用户体验
• 移动端单独做媒体查询适配，保证小屏设备可用性

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