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

概述我想添加一个褪色的部分到我的DIV的顶部,这样当用户滚动时,内容逐渐淡出.我已经设置了一些CSS,实现了这一点,但是有一个问题.褪色部分滚动内容而不是固定在位. 如何解决这个问题？我需要jQuery的帮助,还是可以使用CSS,这可以在任何一个CSS3兼容的浏览器？ (我知道我的线性梯度上没有正确的厂商前缀) 这是我的代码到目前为止和fiddle： .fadedScroller { overfl 我想添加一个褪色的部分到我的div的顶部,这样当用户滚动时,内容逐渐淡出.我已经设置了一些CSS,实现了这一点,但是有一个问题.褪色部分滚动内容而不是固定在位.

如何解决这个问题？我需要jquery的帮助,还是可以使用CSS,这可以在任何一个CSS3兼容的浏览器？ (我知道我的线性梯度上没有正确的厂商前缀)

这是我的代码到目前为止和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,1) 0%,0) 100%);  position: absolute;}

更新

我已经更新了my fiddle,指出使用位置：固定不实际工作作为褪色部分,然后出现在包含的div上面,而不是固定在顶部.

解决方法 创建一个第二个div来保存渐变并将其移动到内容div上.
我知道这很脏,写的不是很直观,但它有效.

HTML：

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

演示：

http://fiddle.jshell.net/hP3wu/12/

总结

以上是内存溢出为你收集整理的html – 滚动div顶部的CSS褪色部分全部内容，希望文章能够帮你解决html – 滚动div顶部的CSS褪色部分所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。