scroll content CSS shadow effect [duplicate]

Question

I am looking for a plugin (similar to sticky header i guess) which creates box-shadow effect on scrollable content (while you scroll down).

I found an existing technique which is using pure CSS tricks, which does exactly what i need (uses background-color property)

However, the scrollable content gets above the shadow, and i need it to be below the shadow.

Is there any plugin which creates the same effect but using an inner div with shadow and dynamic opacity or something like this?

Answer 1

You can try to use box-shadow and apply it dynamically onscroll event depending on 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 what OP wanted is to show shadow on top if div can be scrolled up. In this case, it's even simpler:

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>