Make content scroll behind sticky header

Question

I have a scroll area in which there are different headings which I want to be sticky, have a look at this 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>

As you can see every item is visible behind the headings. As in the fiddle, in my real application these heading elements are also transparent. So I need a way to make the items overflow right under each heading.

I don't understand exactly what you are trying to do... maybe the background color of the heading should hide the contents once they are scrolled under the heading >?? — mlwn, Dec 19 '17 at 09:01
Yes, the headings should hide the items below them, but they have to be transparent, because in my application there is a background-image, so I can't use a color or anything like that — Eddi, Dec 19 '17 at 09:03
and the next level headings should not be allowed to be scrolled on top of previous level headings ? — mlwn, Dec 19 '17 at 09:08
have a look at this.. maybe this is what you want in your application actually... https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_accordion_active — mlwn, Dec 19 '17 at 09:16
That's not the thing I want, sorry. If you have a look at the screenshot, I want the first item not to be visible above the bottomline of "Heading 1" — Eddi, Dec 19 '17 at 09:18

score 0 · Answer 1 · answered Dec 19 '17 at 09:56

0

Place background:inherit to heading and every wrapping element up to the element which has the image as backgrund. Plunkr Credits

answered Dec 19 '17 at 09:56

Jan Tomášek

135
10

I already tried what was suggested there, but it results in an undesired effect, see my updated fiddle. – Eddi Dec 19 '17 at 10:09
Sorry, I can't see no update in your fiddle. It would be good to see the whole code with background img etc. – Jan Tomášek Dec 19 '17 at 10:45
So you can't use `background-attachment: fixed;`? – Jan Tomášek Dec 20 '17 at 16:24

Make content scroll behind sticky header

1 Answers1