スティッキータグは見出しを変更しません。

Question

スティッキー見出しをしたいと思います。ページの上部に接触しているときにCSSスティッキー要素によって1つの見出しが貼り付けられる場所。そして別の見出しに来たら、それは古いものを追い払うべきであり、代わりにそれらの両方がついている。

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をサポートする必要がある場合は、コメントが言うように、別の解決策を見つける必要があります。