после прокрутки, обнаруживает, когда элемент возвращается в исходное положение

Question

Я пытаюсь, вроде, эмулировать эффект here. По сути, во время прокрутки измените 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/