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/

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

1 个答案: