css - 位置 :sticky failing down the page

Question

希望有人能帮忙解决这个问题。有一个设置为 position:sticky 的菜单栏。它从页面加载顶部的 50px 开始。当文档滚动时，菜单栏如预期的那样停留在页面顶部，直到它“击中”页面下方的另一个元素，此时它与其他所有内容一起滚动到视口(viewport)顶部上方。

最初，我认为它正在“运行”到 flex 元素或具有 position:relative 的东西。事实并非如此。

有没有人遇到过这个？我会提供一个代码示例，但我不完全确定是什么导致了这个问题。

Answer 1

MDN:粘性定位可以被认为是相对定位和固定定位的混合体。粘性定位的元素被视为相对定位的，直到它超过指定的阈值，此时它被视为固定的，直到它到达其父元素的边界。

请注意，根据规范，sticky 将不会在具有 overflow: hidden 或 auto 的元素内工作

使用此链接:https://developer.mozilla.org/en-US/docs/Web/CSS/position

示例:

粘性按钮总是移动到其父 div 的边缘。

section {
  height: 200vh;
  display: flex;
}
section nav {
  background: wheat;
  width: 30vw;
  display: flex;
}
section nav button.btn {
  background: #9b59b6;
  border: 0px;
  color: white;
  flex: 1;
  max-height: 50px;
  padding: 1rem;
  position: sticky;
  top: 0px;
}
section div {
  width: 100%;
  background: pink;
}

header, footer {
  text-align:center;
  background: #2c3e50;
  color:white;
}

header{
  padding:1rem;
}
footer{
  height:100vh;
}

<header>Scroll the page to see the sticky effect.</header>
<section> 
  <nav>
    <button class="btn">Sticky Button</button>
  </nav>
  <div>
    <article>Hello!</article>
  </div>
</section>
<footer>Footer</footer>