将内容滚动到粘贴标题后面

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放置到标题和每个包装元素，直到具有图像为背景的元素。 Plunkr Credits