我正在寻找一个插件(我猜类似于粘性标题),它在可滚动内容上创建框阴影效果(当您向下滚动时)。
我找到了 an existing technique which is using pure CSS tricks ,这正是我需要的(使用 background-color
属性)
但是,可滚动内容会高于 阴影,我需要它位于阴影下方。
是否有任何插件可以创建相同的效果,但使用带有阴影和动态不透明度或类似内容的内部 div
?
最佳答案
您可以尝试使用 box-shadow
并根据 scrollTop 值动态应用它 onscroll
事件。也许是这样的:
document.querySelector('div').onscroll = function() {
this.classList[this.scrollTop < 20 ? 'add' : 'remove']('shadow-top');
this.classList[this.scrollHeight - this.clientHeight - this.scrollTop < 20 ? 'add' : 'remove']('shadow-bottom');
};
演示:http://jsfiddle.net/0aevh7kv/
UPD. 我认为 OP 更想要的是在 div 可以向上滚动时在顶部显示阴影。在这种情况下,它甚至更简单:
document.querySelector('div').onscroll = function() {
this.classList[this.scrollTop > 20 ? 'add' : 'remove']('shadow-top');
};
ul, li { padding: 0; margin: 0; }
div {
height: 200px;
border: 1px #AAA solid;
overflow: auto;
transition: box-shadow .2s ease;
}
div.shadow-top {
box-shadow: inset 0 4px 10px -3px #808080;
}
<div>
<ul>
<li>text cotent 1</li><li>text cotent 2</li><li>text cotent 3</li><li>text cotent 4</li><li>text cotent 5</li><li>text cotent 6</li><li>text cotent 7</li><li>text cotent 8</li><li>text cotent 9</li><li>text cotent 10</li><li>text cotent 11</li><li>text cotent 12</li><li>text cotent 13</li><li>text cotent 14</li><li>text cotent 15</li><li>text cotent 16</li><li>text cotent 17</li><li>text cotent 18</li><li>text cotent 19</li><li>text cotent 20</li>
</ul>
</div>
关于javascript - css滚动内容阴影效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27481585/