13

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

我怎样才能解决这个问题？我是否需要 jQuery 的帮助，或者是否可以使用 CSS，这是否可以在任何与 CSS3 兼容的浏览器中工作？（我知道我linear-gradient的 s 上还没有正确的供应商前缀）

到目前为止，这是我的代码和小提琴：

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

更新

我已经更新了我的小提琴，指出使用position: fixed实际上不起作用，因为褪色部分然后出现在包含未固定到顶部的 div 上方。

4

4 回答 4

11

创建第二个 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/

于 2013-06-11T12:58:28.870 回答
3

很简单，使用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/

更新1

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

更新2

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

于 2013-06-11T12:41:29.943 回答
1

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

所以首先我做了另一个div，class="after"因为我不能:after用 JQuery 选择伪元素

然后，div.after每次在.fadedScrollbar divwith中发生滚动时，我都会自行重新定位

$(".fadedScroller").scroll(function () {
    $(".fadedScroller .after").css("top", $(this).scrollTop());
});
于 2013-06-11T13:06:55.510 回答
0

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

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 底部的淡入淡出是类似的，只是您需要将偏移量计算为

$(".fadedScroller")[0].scrollHeight - $(".fadedScroller")[0].clientHeight - $(".fadedScroller")[0].scrollTop
于 2016-09-16T22:05:57.317 回答