我想添加一个褪色的部分到我的DIV的顶部,这样当用户滚动时,内容逐渐淡出.我已经设置了一些CSS,实现了这一点,但是有一个问题.褪色部分滚动内容而不是固定在位.
如何解决这个问题？我需要jQuery的帮助,还是可以使用CSS,这可以在任何一个CSS3兼容的浏览器？ (我知道我的线性梯度上没有正确的厂商前缀)
.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,1) 0%,0) 100%);
position: absolute;
}
更新
我已经更新了my fiddle,指出使用位置：固定不实际工作作为褪色部分,然后出现在包含的div上面,而不是固定在顶部.
解决方法
创建一个第二个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,0) 100%);
position: relative;
}
演示：
