0

ユーザーに表示される div を表示する方法を見つけようとしています。スクロール..それが私の問題です。次を参照してください。

http://jsfiddle.net/makypl/966Uy/1/

この div は、下にスクロールしている間は div.left2 の下に留まり、上にスクロールしている間は元の位置に戻る必要があります。

    <div id="wrapper">
    <div id="l">
        <div class="left">
            <p class="trigger">Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1</p>
        </div>
        <div class="left2">
            <p class="trigger">Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2</p>
        </div>
        <div class="thisone">
            <p>This one should stay always visible
                <p>
        </div>
    </div>
    <div class="right">
        <p>Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem...</p>

    </div>
</div>

どんな提案でも歓迎します

4

2 に答える 2

11

Bootstrap Affix を使用します。例を次に示します: http://bootply.com/62673

于 2013-07-22T14:05:09.727 に答える
7 
var top = $('.thisone').offset().top;
$('.trigger').click(function () {
    $('.thisone').css('position','');  
    $('.left2').toggle('slow',function(){
        top = $('.thisone').offset().top;
    });

});



$(document).scroll(function(){
    //calculating the minimal top position of the div
    $('.thisone').css('position','');
    top = $('.thisone').offset().top;

    $('.thisone').css('position','absolute');                 
    $('.thisone').css('top',Math.max(top,$(document).scrollTop()));
 });

これでうまくいくはずです。 http://jsfiddle.net/966Uy/11/

編集: アニメーション中にユーザーがスクロールした場合にバグが発生する可能性があるため、いくつかの調整を行いました。

于 2013-07-22T14:07:55.027 に答える