Javascript Css滚动内容阴影效果

我正在寻找一个插件（我想类似于粘性标题），它可以在可滚动内容上创建框阴影效果（当你向下滚动时）

我发现，它正好满足我的需要（使用

背景色
属性）

但是，可滚动内容位于阴影上方，我需要它位于阴影下方

是否有任何插件可以创建相同的效果，但使用具有阴影和动态不透明度的内部
div
，或者类似的东西

您可以使用
框阴影：插入0 10px#000000例如。
您可以尝试使用
框阴影
并根据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');
};

ul，li{padding:0；margin:0；}
div{
高度：200px；
边框：1px#AAA实心；
溢出：自动；
过渡：方块阴影。2秒轻松；
}
阴影顶分区{
盒影：插入0 4px 10px-3px#808080；
}


正文部分1
正文部分2
正文部分3
正文部分4
正文部分5
正文部分6
正文部分7
正文部分8正文部分9正文部分10正文部分11正文部分12正文部分13正文部分14第16节第17节第18节第19节第20节

只有在向下滚动内容时，阴影才需要可见。这就像一个视觉反馈，你的内容在可见的滚动条之外area@RaraituL您可以使用jQuery:）进行切换（只需在滚动时显示/隐藏阴影），就不会产生渐进效果。我需要阴影从浅灰色到深灰色，取决于你有多少scrolled@RaraituL你可以用cssStarting设置一个动画，从你做的开始，我已经对它进行了更新，它可以正常工作（）