html - 在转换之前删除填充

Question

我正在开发一个导航栏，它使用相交观察器缩小，相应地添加一个类，但当过渡开始时，它从 0 填充开始。

此时，当添加 .nav-scrolled 时，CSS 属性也会添加到导航栏。但是当它添加时，填充开始从 0 过渡。我能做什么？

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);
}

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

Answer 1

填充并不是从 0 开始。发生这种情况是因为 nav 元素的子元素上有 margin-inline 。当您滚动时，该边距会消失，并且子级没有过渡标签，因此这就是它看起来在跳跃的原因。我刚刚删除了这个 css 行。看起来效果很好:)

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>