Kaya Toast Kaya Toast - 1 month ago 14
CSS Question

after scrolling, detect when element returns to original position

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

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/

Comments