滚动后，检测元素何时返回原始位置

Question

I am trying to, sort of, emulate the effect here . Essentially, during scrolling, change the css (drop shadow), and when the element comes back to original position (remove shadow).

I am able to detect scroll, but not able to figure out how to detect the return to the original un-scrolled state.

HTML

<div id="container">
    <ul>
        <li id="one">el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li>
    </ul>
</div>

CSS

       html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    #container {
        height: 100px;
        width: 500px;
        border: 1px solid #000000;
        overflow: scroll;
    }

JS (with jquery)

var p = $('#one');
var position0 = p.position().top;
$('#container').scroll(function () {
    if (p.position().top != position0) {
        console.log('p.position: ' + p.position().top);
        $('#container').css('background-color', 'pink');
    }
});

JSFIDDLE: http://jsfiddle.net/nrao89m3/

PS: From console.log it doesn't seem to return to its original value at all.

Answer 1

Just add an else block:

var p = $('#one');
var position0 = p.position().top;
$('#container').scroll(function () {
    if (p.position().top != position0) {
        console.log('p.position: ' + p.position().top);
        $('#container').css('background-color', 'pink');
    } else {
        $('#container').css('background-color', 'white');
    }
});

http://jsfiddle.net/vyjbwne2/