Css shadow scroll effect
I'm looking for a plugin (similar to a sticky header I think) that creates a drop shadow effect on scrollable content (while you scroll down).
I found an existing method that uses pure CSS tricks that does exactly what I need (uses a property background-color
)
However, the scrollable content gets above the shadow and I need it to be below the shadow.
Is there any plugin that creates the same effect but uses an internal one div
with shadow and dynamic opacity or something like that?
source to share
You can try to use box-shadow
and apply its onscroll
event dynamically depending on the scrollTop value. Maybe something like this:
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');
};
Demo: http://jsfiddle.net/0aevh7kv/
UPD. I think more of what the OP needs is to show a drop shadow on top if the div is scrollable. In this case, it's even easier:
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>
source to share
For example, you can use box-shadow: inset 0 0 10px #000000;
.
http://css-tricks.com/snippets/css/css-box-shadow/
source to share