CSS - Apply a gradient that remains fixed as the div scrolls

Question

I'm fairly new to web design, and I've been struggling with this effect for several hours now. I'd like to have a scrolling text box wherein there is a gradient over the text and that gradient stays fixed as you scroll up and down. The code I have now produces a scrolling div with a gradient, but that gradient is produced over the whole height of the text included in the div. I want the scope of the gradient to be limited to the div itself, if that makes sense.

A solution that seems to be almost there is to give the gradient div fixed position. However, when your mouse is over this fixed div, you cannot scroll through the (parent) div that's underneath it.

My apologies if this has been answered elsewhere. I hunted around but could have missed or misread something.

Anyhoo here is a jfiddle showing what is currently going on: http://jsfiddle.net/sP2e5/

Here is the actual html:

<div class="transcript" id="prisonerResponse">
        <p>i'm actually including an obnoxious amount of text 
           so you can see the scrolling effect: so much textso much 
            textso much 
            textso much textso much textso much 
            textso much textso much textso much textso 
            much textso much textso much textso much textso 
            much textso much textso much textso much 
            textso much textso much textso much 
            textso much textso much textso much t
            extso much textso much textso much t
            extso much textso much textso much 
            textso much textso much textso much 
            textso much textso much textso much text</p>
            <div class="transcriptGradient"> </div>

</div>

and here is the css:

 .transcript{
    overflow:scroll; 
    width:350px; 
    height:100px;
    display:inline-block;
    margin-left:20px;
    position:relative;
    }

.transcriptGradient{
    width:100%; 
    height:100%;
    position:absolute;
    top:0;
    background: -webkit-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100% );
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255,255,255,0) 100%); 
}

Answer 1

With :before selector in div.transcript, you don't need extra div to achieve this result. All you need is position: fixed; applied to .transcript:before.

The downside of these methods (put gradient above scrollable content) is in Firefox, you cannot scroll the content if your cursor is on the gradient. So put your attention on gradient height.

HTML

<div class="transcript" id="prisonerResponse">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. [...] </p>
</div>

CSS

.transcript {
    overflow: scroll;
    width: 350px;
    height: 200px;
    display: inline-block;
    margin: 10px;
    position: relative;
}
.transcript:before {
    content:"";
    width: 350px;
    height: 80px;
    position: fixed;
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

Hope it helps :)

Answer 2

If you don't care too much what the code looks like... here's a "ok" way to solve your issue, change the .transcriptGradient placement:

Jsfiddle example