css - 粘性标签不会改变标题

Question

我想做一个置顶标题。当一个标题与页面顶部接触时，它会被 CSS 粘性元素粘住。当另一个标题出现时，它应该推开旧标题，而不是两个标题都被卡住。

code

<h1>HEADING</h1><br />
<h2>Heading</h2>
<p>text</p>
<h2>Another heading</h2>
<p>text</p>

h2 {
    font-size: 40px;   
    text-align: center;
    margin-top: 120px; 
    margin-bottom: 80px; 
    padding: 15px;   
    position: sticky; 
    top: -1px; 
}              
p {
    text-align: center;
    padding: 15px; 
    margin-bottom: 80px; 
    color: #262216;
}   
h2,p {
    display: flex;
    min-width: 500px;
    max-width: 1000px;    
    margin-left: auto;
} 

Answer 1

如果您希望第一个标题被第二个标题推出窗口，请将标题和其后的内容放在单独的容器中直到下一个标题。 sticky 仅适用于屏幕上可见的容器，因此一旦容器不可见，h2 就不再具有粘性。在此示例中，我为容器使用了 section。

请注意，p 上巨大的底部边距使发生的事情难以理解，但如果将其更改为底部填充，效果会更加清晰。

  h2 {
  font-size: 40px;
  text-align: center;
  margin-top: 120px;
  margin-bottom: 80px;
  padding: 15px;
  position: sticky;
  top: -1px;
}

p {
  text-align: center;
  padding: 15px;
  margin-bottom: 80px;
  color: #262216;
}

h2,
p {
  display: flex;
  min-width: 500px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;

<h1>HEADING</h1>
<section>
  <h2>Heading</h2>
  <p>text <br/>
     text <br/>
     text <br/>
     text <br/>
     text <br/>
     text <br/>
     text <br/>
     text <br/>
     text <br/>
     text <br/>
     text <br/>
     text <br/>
     text <br/>
     text <br/>
     text <br/>
     text <br/>
     text <br/>
     text <br/>
     text </p>
</section>
<section>
  <h2>Another heading</h2>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</section>

此外，sticky 目前在 IE 中不起作用，因此如果您需要支持 IE，则必须找到不同的解决方案，如评论所述。