粘性标签不会改变标题

Question

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

<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

如果你想让第一个header被第二个header推出window，把header和它后面的内容放到next header 在一个单独的容器中。 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，则必须找到其他解决方案，如评论所述。

粘性标签不会改变标题

Sticky tag doesn't change headings

css

sticky

heading