Question

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

这个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

使用Bootstrap Affix，这是一个例子：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/

修改进行一些调整会导致用户在动画期间滚动时出现错误。

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

2 个答案: