jquery - 滚动时如何定位框

Question

如何定位绿色框，以便在使用 jQuery 滚动超过其高度时，框的底部与可用空间的底部对齐。

<div class="content">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>

.content { width: 400px; position: relative; height: 200px; overflow-y: auto; overflow-x: hidden; border: 1px solid gray; }
.left { position: absolute; left: 0; width: 200px; background: red; height: 400px; }
.right { position: absolute; right: 0; width: 200px; height: 100px; background: green; }


$('.content').scroll(function(){
    //how to position green box so the bottom of the box
    //is aligned to bottom of space available
});

http://jsfiddle.net/chovy/ryFGK/4/

Answer 1

Something like this?

http://jsfiddle.net/ryFGK/5/

<div class="content">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>

$('.content').bind('scroll', function(e) {
    var content = $(this);
    var scrollTop = content.scrollTop();
    var green = $('.right');
    console.log('Top: ' + green.position().top + ', ScrollTop: ' + scrollTop);
    if (scrollTop > green.height()) {
        green.css({top: scrollTop + content.height() - green.height()});
    } else {
        green.css({top: 0});
    }
});

Answer 2

http://jsfiddle.net/sujesharukil/ryFGK/18/

我基本上设置了一个初始css

bottom: 0

在绿色盒子上。

检查滚动顶部，如果它大于绿色框的高度，那么我将其捕捉到底部，当向上滚动时，else 条件触发并将其捕捉回底部。