スティッキーヘッダーの後ろにコンテンツをスクロールします

Question

私はスティッキーにしたい異なる見出しがあるスクロールエリアを持っています。これを見てくださいfiddle。

すべての項目は、見出しの後ろに表示されているあなたが見ることができるように

.item{ 
 
    height: 60px; 
 
    width: 100%; 
 
    background-color:red; 
 
    margin:3px 0; 
 
} 
 

 
.heading{ 
 
    position:sticky; 
 
    top:0; 
 
    height:40px; 
 
}

<div style="overflow-y:auto;height:300px;"> 
 
    <h3 class="heading">Heading 1</h3> 
 
    <div class="item">Item 1</div> 
 
    <div class="item">Item 2</div> 
 
    <div class="item">Item 3</div> 
 
    <h3 class="heading">Heading 2</h3> 
 
    <div class="item">Item 4</div> 
 
    <div class="item">Item 5</div> 
 
    <div class="item">Item 6</div> 
 
    <h3 class="heading">Heading 3</h3> 
 
    <div class="item">Item 7</div> 
 
    <div class="item">Item 8</div> 
 
    <div class="item">Item 9</div> 
 
    <h3 class="heading">Heading 4</h3> 
 
    <div class="item">Item 19</div> 
 
    <div class="item">Item 11</div> 
 
    <div class="item">Item 12</div> 
 
</div>

。私の実際のアプリケーションでは、これらの見出しの要素も、透明です。だから、各見出しの下に項目をオーバーフローさせる方法が必要です。

Answer 1

background:inheritは、イメージをバックグラウンドとして持つ要素までの見出しとすべての折り返し要素に配置します。 PlunkrCredits