滚动页面时Fixed定位Navbar内容紧贴底部边框的问题求助

设置导航栏position: fixed实现滚动固定后，滚动页面时导航栏内的Logo、导航链接、社交图标等元素紧贴底部边框，需要为元素与边框添加间距。

现有代码 #

HTML

<nav>
  <div class="container nav_container">
    <a href="index.html" class="nav_logo"
      ><img src="images/navlogo.png" alt="Nav Logo"
    /></a>
    <ul class="nav_links">
      <li><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#exhibitions">Exhibitions</a></li>
    </ul>
    <ul class="nav_socials">
      <li>
        <a href="https://instagram.com/" target="_blank"
          ><i class="fa-brands fa-instagram"></i
        ></a>
      </li>
      <li>
        <a href="https://X.com/" target="_blank"
          ><i class="fa-brands fa-x-twitter"></i
        ></a>
      </li>
      <li>
        <a href="https://youtube.com/" target="_blank"
          ><i class="fa-brands fa-youtube"></i
        ></a>
      </li>
      <li>
        <a href="https://email.com/" target="_blank"
          ><i class="fa-solid fa-envelope"></i
        ></a>
      </li>
    </ul>
    <button class="nav_toggle-btn" id="nav_toggle-open">
      <i class="fa-solid fa-bars"></i>
    </button>
    <button class="nav_toggle-btn" id="nav_toggle-close">
      <i class="fa-solid fa-x"></i>
    </button>
  </div>
</nav>

CSS

.container {
    width: var(--container-width-lg);
    margin: 0 auto;
    max-width: 2160px;
}

img {
    display: block;
    object-fit: cover;
    width: 100%;
}

nav {
    height: 5rem;
    width: 100vw;
    display: grid;
    place-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}

/*nav class on scroll using javascript*/
.window-scrolled {
    background: var(--color-bg-2);
    border-bottom: 0.2rem solid var(--color-bg-3);
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.3);
}
.nav_container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav_toggle-btn{
    display: none;
}

.nav_logo{
    width: 7.5rem;

}

.nav_links{
    display: flex;
    gap: 4rem;
}

.nav_socials{
    display: flex;
    gap: 1.5rem;
}

.nav_socials a {
    width: 2rem;
    height: 2rem;
    background: linear-gradient(var(--color-primary-variant), var(--color-primary));
    border-radius: 0.5rem;
    color: var(--color-bg-4);
    display: grid;
    place-items: center;
}

.nav_socials a:hover{
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.4);
}

JavaScript

window.addEventListener("scroll", () => {
  document
    .querySelector("nav")
    .classList.toggle("window-scrolled", window.scrollY > 0);
});

问题原因 #

滚动时添加的.window-scrolled类给导航栏增加了border-bottom: 0.2rem，但默认盒模型下，边框会额外占据空间，导致导航栏内部高度被挤压，元素被迫紧贴底部边框。

解决方案 #

推荐给导航栏添加box-sizing: border-box，让边框包含在设定的height范围内，避免挤压内部元素：

修改nav的CSS代码，添加box-sizing: border-box：

nav {
    height: 5rem;
    width: 100vw;
    display: grid;
    place-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    box-sizing: border-box; /* 新增这一行 */
}

也可以通过调整.window-scrolled的样式来补偿空间，比如增加内边距或调整高度：

.window-scrolled {
    background: var(--color-bg-2);
    border-bottom: 0.2rem solid var(--color-bg-3);
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.3);
    padding-bottom: 0.2rem; /* 或者设置height: calc(5rem + 0.2rem) */
}

或者给导航栏容器添加底部内边距：

.window-scrolled .nav_container {
    padding-bottom: 0.5rem;
}

问题截图 #

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