如何让内容在滚动时消失/隐藏在透明标题后面

I created a js fiddle http://jsfiddle.net/claireC/8SUmn/ with a fixed header that is transparent.

我创建了一个js小提琴，http://jsfiddle.net/claireC/8SUmn/，它的一个固定标题是透明的。

When I scroll, you're able to see the text scrolling up behind it. How can I have the text disappear or hidden behind the transparent div on scroll.

当我滚动时，你可以看到文本在它后面滚动。如何让文本消失或隐藏在滚动的透明div后面。

edit: Forgot to mention that the background is an image.

编辑:忘了说背景是一个图像。

Note: I am a beginner in coding. This is me playing around with code and trying to figure things out.

注意:我是一个编程初学者。这是我在摆弄代码并试图解决问题。

Here's my html:

这是我的html:

<div class="container">

<header>
    <ul>
        <li>list one</li>
        <li>list3   </li>
        <li>list2</li>
    </ul>
</header>

<div class="text">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere.

    </p>
</div>

Css:

Css:

    header{
        width: 100%;
        position: fixed;
        top: 0;
        border: 1px solid #000;
    }

    .text{
        border: 1px solid #fff;
        position: relative;
        margin-top: 150px;
    }

    p{
        font-size: 150px;
    }

1 个解决方案

#1

If you are ok with setting the header height, you can use position:absolute and overflow:auto to get the result

如果可以设置标题高度，可以使用position:absolute和overflow:auto获取结果

Demo