使用Intersection Observer实现导航栏收缩时padding从0过渡的问题

问题原因 #

你遇到的padding从0开始过渡的问题，核心来自两个点：

• fixed定位的布局冲突：nav是position:fixed，脱离文档流后，父容器.nav-container的flex居中完全无效。添加.nav-scrolled类后，nav宽度从100vw变为80%会直接左对齐，这种剧烈的位置偏移会掩盖padding的平滑过渡，视觉上看起来像是padding从0开始变化。
• 过渡属性未明确化：用transition: 1s ease过渡所有属性，会导致子元素字体大小、边距等无关变化干扰padding过渡；同时font-size:20%的骤变会让导航栏高度突然收缩，进一步加剧视觉异常。

解决方案 #

1. 修正fixed定位的居中逻辑 #

给nav明确设置初始定位，添加.nav-scrolled类时通过left:50% + transform:translateX(-50%)实现水平居中，避免位置跳变。

2. 明确过渡属性 #

只过渡需要变化的属性，排除无关干扰。

3. 优化字体大小和子元素边距过渡 #

调整font-size为合理值，给子元素边距也添加过渡，让整体变化更平滑。

修改后的完整代码 #

JavaScript（逻辑无需改动） #

const nav = document.querySelector("nav");
const sectionOne = document.querySelector(".intersection");

const sectionOneObserver = new IntersectionObserver(function(entries, sectionOneObserver) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      nav.classList.add("nav-scrolled")
    } else {
      nav.classList.remove("nav-scrolled")
    }
  });
});

sectionOneObserver.observe(sectionOne)

CSS（核心修改部分） #

.nav-container {
  display: flex;
  justify-content: center;
}

nav {
  position: fixed;
  width: 100%; /* 用100%代替100vw，避免滚动条影响布局 */
  padding-block: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 明确列出需要过渡的属性，避免无关干扰 */
  transition: padding-block 1s ease, width 1s ease, transform 1s ease, border-radius 1s ease, font-size 1s ease;
  left: 0;
  top: 0; /* 明确fixed定位的初始位置 */
}

nav>* {
  margin-inline: 5%;
  transition: margin-inline 1s ease; /* 子元素边距也添加过渡 */
}

nav>div {
  width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  padding-block: 10px;
}

.nav-scrolled {
  width: 80%;
  padding-block: 15px;
  font-size: 80%; /* 修正为合理的字体收缩比例，保证可读性 */
  border-radius: 20px;
  left: 50%;
  /* 同时实现水平居中和垂直偏移 */
  transform: translateX(-50%) translateY(15px);
}

.nav-scrolled>* {
  margin-inline: 15px;
}

.intersection{height:10vh}

.body{color:red; height:120vh}

HTML（无需改动） #

<div class="nav-container">
  <nav>
    <a href="#">
      <h1>Heading</h1>
      <h2>Heading-2</h2>
    </a>
    
    <div>
      <a href="#">link1</a>
      <a href="#">link2</a>
      <a href="#">link3</a>
    </div>
  </nav>
</div>

<div class="intersection"></div>
<div class="body"></div>

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