after scrolling, detect when element returns to original position

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.

possible duplicate of [retrieve Scrollbar position with javascript](http://stackoverflow.com/questions/2481350/retrieve-scrollbar-position-with-javascript) — Philip Raath, Feb 20 '15 at 18:01
@PhilipRaath nope, not a duplicate. if you try it out (copy my code and execute) and notice the `console.log`, the initial number against the element does NOT match the final number against the element (even after physically scrolling it back to the same position). — Kaya Toast, Feb 20 '15 at 18:04

score 2 · Accepted Answer · edited Feb 20 '15 at 18:13

2

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/

edited Feb 20 '15 at 18:13

Jacob G

13,762
3
47
67

answered Feb 20 '15 at 18:05

Igor Adamenko

861
1
8
20

`console.log` doesn't show initial value because your code runs only when user scrolls (and initial position != current). try it: http://jsfiddle.net/1aaeod15/ and look to console logs – Igor Adamenko Feb 20 '15 at 18:07
1

makes sense ... I should have explored this myself (sheepish embarrassed grin!). Thanks. – Kaya Toast Feb 20 '15 at 18:09

after scrolling, detect when element returns to original position

1 Answers1