bootstrap - 如何使 div 在滚动时始终可见

Question

我正在尝试找到一种方法来显示 div，allays 对用户可见。滚动..这是我的问题，请参阅：

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>

欢迎提出任何建议 谢谢

Answer 1

使用引导词缀，这里是一个例子：http://bootply.com/62673

Answer 2

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/

编辑： 做了一些调整，如果用户在动画期间滚动可能会出现错误。