粘性标签不会改变标题

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上的巨大底部边距使得难以遵循的事情发生，但如果将其更改为底部填充，则会使效果更加清晰。

＆＃13;

＆＃13;

  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;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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