Overflow scroll but visible
<p>I have a <code>header</code> element with an <code>article</code> element below it. The <code>article</code> has <code>overflow: scroll</code>. Please see my website <a href="https://duosear.ch" rel="noreferrer">here</a>.</p>

<p>My goal is to make the <code>header</code> semi-transparent so that the <code>article</code> content will show behind it when scrolled. I want the <code>article</code> overflow to show with the <code>header</code>.</p>

<p>The main restriction is that the scrollbar should span from the bottom of the <code>header</code>, not the top.</p>

<p>How can such an effect be done?</p>