这并不是说padding从0开始。这是因为你在nav元素的子元素上有margin-inline。当你滚动时，这个边距会消失，而子元素没有transition-tag，所以这就是为什么它看起来像是跳跃的原因。我只是删除了这个css-line。看起来工作得很好：）

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)

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

nav {
  position: fixed;
  width: 100vw;
  padding-block: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 1s ease;
}

nav>* {
  margin-inline: 5%;
}

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: 20%;
  border-radius: 20px;
  transform: translateY(15px);
}

.intersection{height:10vh}

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

<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>

这似乎是.nav-scrolled>*选择器的问题。这是导致跳转的属性更改。当转换扩展为5s长时，更容易看到这一点。
问题的发生是因为你没有在nav>*上应用transition，即使你在滚动时改变了属性，因此立即跳转而看不到过渡。修复方法是移动过渡以应用于父.nav选择器和nav>*选择器，如下所示：

nav,
nav>* {
  transition: 5s ease;
}

字符串

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)

x

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

nav {
  position: fixed;
  width: 100vw;
  padding-block: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav>* {
  margin-inline: 5%;
}

nav,
nav>* {
  transition: 5s 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: 20%;
  border-radius: 20px;
  transform: translateY(15px);
}

.nav-scrolled>* {
  margin-inline: 15px;
}
.intersection{height:10vh}

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

<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>

的字符串