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上。我知道这有点脏，写起来不是很直观，但它确实有效。

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

演示：

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

Answer 2

非常简单，请使用position:fixed代替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/

Answer 3

这是一个巨大的解决方案，所以道歉，但这是我能想到的唯一方法：http://fiddle.jshell.net/hP3wu/17/

首先我用div创建了另一个class="after"因为我无法用JQuery选择:after伪元素

然后，每当div.after .fadedScrollbar中出现滚动时，我就会自行重新定位div

$(".fadedScroller").scroll(function () {
    $(".fadedScroller .after").css("top", $(this).scrollTop());
});

Answer 4

http://fiddle.jshell.net/ne1baj4e/1/这是我对yckart解决方案的修改，它可以在div滚动到顶部时减少淡入淡出。它只是添加了一点Javascript / JQuery：

mime

div底部的淡入淡出是类似的，除非您需要计算偏移量

const FADE_HEIGHT = 40;
let oldStyle = $(`<style>.fadedScroller:after {top: -${FADE_HEIGHT}px;}</style>`).appendTo("head");

$(".fadedScroller").scroll(() => {
  let offset = Math.min($(".fadedScroller").scrollTop() - FADE_HEIGHT, 0);

  oldStyle.remove();

  oldStyle = $(`<style>.fadedScroller:after {top: ${offset}px;}</style>`).appendTo("head");
});

滚动div顶部的CSS褪色部分

4 个答案: