html - 滚动 div 顶部的 CSS 褪色部分

Question

我想在我的 DIV 顶部添加一个淡出部分，这样当用户滚动时，内容会逐渐淡出。我已经设置了一些 CSS 来实现这一点，但有一个问题。褪色部分随内容滚动，而不是固定在原地。

我该如何解决这个问题？我是否需要 jQuery 的帮助，或者是否可以使用 CSS，这是否适用于 CSS3 兼容浏览器？ (我知道我的 linear-gradient 上还没有正确的供应商前缀)

这是我目前的代码和一个 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;
}

更新

我已经更新了my fiddle要指出的是，使用 position: fixed 实际上不起作用，因为褪色部分然后出现在包含 div 的上方，而不是固定在顶部。

Answer 1

创建第二个 div 来保存渐变并将其移动到内容 div 上。我知道这有点脏，写起来不是很直观，但它确实有效。

演示:

.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;
}

<div class="fadedScroller">
    awesome stuff here<br />
    awesome stuff here<br />
    awesome stuff here<br />
    awesome stuff here<br />
    awesome stuff here<br />
    awesome stuff here<br />
    awesome stuff here<br />
    awesome stuff here<br />
    awesome stuff here<br />
</div>
<div class="fadedScroller_fade"></div>

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