CSS/JS实现：首页居中Logo滚动时平滑过渡为Navbar左侧品牌标识

基于你提供的Bootstrap导航栏代码，要实现Logo从页面顶部中央滚动后过渡到左侧的效果，需要结合CSS过渡动画和滚动事件监听来完成，以下是具体实现步骤：

1. 调整HTML结构 #

给导航栏添加固定定位属性，同时统一Logo尺寸，补充导航链接用于完整展示效果：

<nav class="navbar navbar-expand-md navbar-light bg-faded fixed-top">
  <a class="navbar-brand" href="#">
    <img src="logo.jpg" alt="LOGO" style="height: 40px; width: auto;">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">服务</a>
      </li>
    </ul>
  </div>
</nav>

<!-- 测试用滚动内容 -->
<div style="height: 1500px; padding-top: 80px;">
  滚动页面查看Logo过渡效果...
</div>

2. 添加CSS过渡样式 #

通过自定义CSS实现Logo的居中定位、滚动后的位置变化，以及平滑过渡动画：

/* 默认状态：Logo居中 */
.navbar-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease-in-out; /* 平滑过渡动画 */
}

/* 滚动后的导航栏样式 */
.navbar.scrolled {
  background-color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 滚动后：Logo移至左侧 */
.navbar.scrolled .navbar-brand {
  left: 1rem;
  transform: translateX(0);
}

/* 修复移动端菜单按钮被遮挡问题 */
.navbar-toggler {
  position: relative;
  z-index: 10;
}

3. 添加滚动监听逻辑 #

用JavaScript监听页面滚动事件，动态切换导航栏的状态类：

window.addEventListener('scroll', function() {
  const navbar = document.querySelector('.navbar');
  // 滚动超过50px时触发状态切换，可根据需求调整阈值
  if (window.scrollY > 50) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});

效果说明 #

• 未滚动时：Logo位于导航栏中央，导航栏保持原有浅背景
• 滚动后：Logo平滑移动到左侧，导航栏切换为白色背景并添加阴影，增强层次感
• 回到顶部时：Logo自动平滑回归中央位置

注意事项 #

• 确保已引入Bootstrap的CSS、jQuery和Popper.js文件（Bootstrap折叠菜单依赖这些资源）
• 可自行调整过渡动画时长（transition属性的0.3s）、滚动触发阈值（scrollY > 50）以及Logo的尺寸和位置

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