CSS faded section at top of scrolling div

Question

I want to add a faded section to the top of my DIV such that, when a user scrolls, the content gradually fades out. I have set up some CSS that achieves this but has one issue.. The faded section scrolls with the content rather than staying fixed in place.

How can I fix this? Do I need help from jQuery or is it possible using CSS and will this work in anything bar CSS3 compatible browsers? (I know I dont have correct vendor prefixes on my linear-gradients yet)

Here is my code so far and a fiddle:

.fadedScroller {
  overflow: auto;
  position: relative;
  height: 100px;
}

.fadedScroller:after {
  content: '';
  top: 0;
  left: 0;
  height: 20px;
  right: 0;
  background: linear-gradient(to bottom, rgba(251,251,251,1) 0%,rgba(251,251,251,0) 100%);
  position: absolute;
}

Update

I have updated my fiddle to point out that using position: fixed doesnt actually work as the faded section then appears above the containing div not fixed to the top.

Answer 1

Creating a second div to hold the gradient and shifting it over the the content div works. I know this is kindof dirty and not very intuitive to write, but it works.

HTML:

<div class="fadedScroller">
   ...
</div>
<div class="fadedScroller_fade"></div>

CSS:

.fadedScroller {
    overflow: auto;
    position: relative;
    height: 100px;
}

.fadedScroller_fade {
    content:'';
    margin-top: -100px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(251, 251, 251, 1) 0%, rgba(251, 251, 251, 0) 100%);
    position: relative;
}

Demo:

https://jsfiddle.net/hP3wu/12/

Answer 2

Pretty simple, use position:fixed instead of position:absolute:

.fadedScroller:after {
    content:'';
    position: fixed;
    top: 0;
    left: 0;
    height: 20px;
    right: 0;
    background: linear-gradient(to bottom, rgba(251, 251, 251, 1) 0%, rgba(251, 251, 251, 0) 100%);
}

https://jsfiddle.net/hP3wu/4/

Update1

https://jsfiddle.net/hP3wu/7/

Update2

https://jsfiddle.net/hP3wu/9/