滾動后，檢測元素何時返回原始位置

Question

我試圖在某種程度上模仿這里的效果。 本質上，在滾動過程中，請更改css（陰影），以及在元素返回原始位置時（移除陰影）。

我能夠檢測到滾動，但無法弄清楚如何檢測返回到原始未滾動狀態。

的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（帶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：從console.log它似乎根本沒有返回到其原始值。

Answer 1

只需添加一個else塊：

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/