定制带居中Logo的Bootstrap导航栏：位置与阴影实现问询

我来帮你搞定这两个问题——让Logo精准定位在导航栏正上方，还有给导航栏和Logo加上自然的阴影效果。咱们基于你现有的代码一步步调整：

一、核心修改思路 #

1. Logo居中定位：调整导航栏的布局结构，把Logo从导航列表里移出来单独放置，利用相对+绝对定位配合Flex特性实现稳定居中，同时适配滚动时的尺寸变化。
2. 阴影效果：通过CSS的box-shadow属性给导航栏和Logo添加分层阴影，滚动时让阴影随Logo尺寸同步变化，增强视觉层次感。

二、修改后的完整代码 #

HTML部分 #

<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-light">
  <div class="container nav-container">
    <!-- 单独放置Logo，脱离导航列表避免布局干扰 -->
    <a class="navbar-brand logo-container" href="index.html">
      <img src="https://placeimg.com/640/480/any" class="largeLogo" id="Logo" alt="Star Books">
    </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="navbar-collapse collapse" id="navbarNav">
      <ul class="navbar-nav nav-fill w-100">
        <li class="nav-item active align-self-center">
          <a class="nav-link" href="#">About<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item align-self-center">
          <a class="nav-link" href="#">Books</a>
        </li>
        <li class="nav-item align-self-center">
          <a class="nav-link" href="#">Book Club</a>
        </li>
        <li class="nav-item align-self-center">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS部分 #

/* 导航容器设为相对定位，作为Logo绝对定位的参考基准 */
.nav-container {
  position: relative;
}

/* Logo容器实现绝对居中 */
.logo-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* 确保Logo始终在导航内容上方 */
}

#Logo {
  transition: all 0.5s ease;
  border-radius: 50%;
  /* Logo基础阴影 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.largeLogo {
  width: 200px;
  /* 大尺寸Logo用更柔和的阴影 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.smallLogo {
  width: 100px;
  /* 小尺寸Logo用更紧凑的阴影 */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* 导航栏基础样式与阴影 */
.navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding-top: 60px; /* 给大Logo预留上方空间，避免遮挡 */
  padding-bottom: 60px;
  transition: padding 0.5s ease; /* 内边距随滚动平滑过渡 */
}

/* 滚动后导航栏适配小Logo的内边距 */
.navbar.scrolled {
  padding-top: 20px;
  padding-bottom: 20px;
}

JS部分 #

window.onscroll = function() { growShrinkLogo() };
var Logo = document.getElementById("Logo");
var navbar = document.querySelector('.navbar');
var endOfDocumentTop = 150;
var size = 0;

function growShrinkLogo() {
  var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  
  if (size == 0 && scroll > endOfDocumentTop) {
    Logo.className = 'smallLogo';
    navbar.classList.add('scrolled');
    size = 1;
  } else if (size == 1 && scroll <= endOfDocumentTop) {
    Logo.className = 'largeLogo';
    navbar.classList.remove('scrolled');
    size = 0;
  }
}

三、关键修改说明 #

1. Logo定位逻辑：

   • 把Logo从导航列表中移出，避免列表的Flex布局干扰居中定位；
   • 导航容器设为relative，让Logo的absolute定位有参考基准；
   • 通过top:50% + left:50% + transform: translate(-50%,-50%)实现完美居中，无论导航栏尺寸如何变化，Logo始终在正上方。

2. 阴影效果优化：

   • 给Logo和导航栏分别设置不同状态的阴影参数，滚动时阴影随Logo尺寸同步变化，视觉过渡更自然；
   • 导航栏通过scrolled类调整内边距，适配Logo的大小变化，避免页面内容被遮挡。

3. 交互体验升级：

   • 新增导航栏内边距的平滑过渡，让滚动时的整体变化更协调，没有突兀感。

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