0

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/

4

2 に答える 2

1

このようなもの？

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});
    }
});
于 2013-03-19T19:30:02.047 に答える
0

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

私は基本的に初期CSSを設定します

bottom: 0

緑の箱に。

スクロールの上部を確認し、緑色のボックスの高さよりも大きい場合は下部にスナップし、上にスクロールすると、else 条件が発生して下部にスナップされます。

于 2013-03-19T19:58:46.987 に答える