스티커 태그가 제목을 변경하지 않습니다.

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의 거대한 아래쪽 여백은 따라하기 힘든 일이 일어나지 만, 아래쪽 패딩으로 변경하면 효과가 훨씬 명확 해집니다. 당신이 IE를 지원해야하는 경우 주석 말처럼, 당신은 다른 해결책을 찾기 위해해야합니다, 그래서 또한

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에서 작동하지 않습니다.