html - 使用具有固定位置 div 的 Bootstrap 网格

Question

我正在尝试使用 Bootstrap 网格布局，但也尝试使用一个在您向下滚动页面时垂直固定的 div。为了修复 div，我使用了“position:fixed”，但这似乎破坏了包含类。文本溢出到下一列，这是不应该的。

    <div class="container">
    <div class="row-fluid">
        <div class="col-md-1">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit euismod dolor id posuere. In vulputate lacinia sem vel dignissim. Donec eu ornare lacus. Vestibulum quis enim et mauris mattis commodo blandit eget lectus. Sed sem augue, aliquet ac vulputate in, congue suscipit justo. Duis ac rhoncus tellus. Sed eu faucibus leo. Mauris imperdiet nisi vitae nisi varius, a egestas purus laoreet. Suspendisse eu sodales mi. Nunc in laoreet ipsum, id mattis massa. Sed in iaculis augue, vel commodo turpis. Aliquam placerat velit in justo vulputate, eu pulvinar nunc facilisis. Maecenas sit amet purus est. Integer in pharetra tortor. Donec ac lorem massa. Fusce ac eros pharetra, blandit tellus at, varius velit. 
            </div>
        </div>
        <div class="col-md-5">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit euismod dolor id posuere. 
            </div>
        </div>

        <div class="col-md-3">
            <div style="position:fixed">
                <b>This should remain fixed as I scroll down the page</b> 
            </div>
        </div>

        <div class="col-md-3">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit euismod dolor id posuere. 
            </div>
        </div>
    </div>
</div>

我应该怎么做才能在滚动时保持 div 固定，同时还要遵守 Bootstrap 设置的网格布局？

Answer 1

我为解决这个问题所做的是让 jQuery 在页面加载时获取 div 的大小，然后将其传递给内部 div 的 css。像这样:

var divWidth = $( '.yourDiv' ).width();

这将在页面加载后立即获取宽度。

function keepDivWidth() {
  $( window ).scroll( function () {
    var top = $( window ).scrollTop();
    if ( top >= 10 ) ) {
      $( '.yourDiv' ).addClass( 'fixed' );
      $( '.yourDiv' ).css({
         "width" : divWidth
         })
    }else{
      $( '.yourDiv' ).removeClass( 'fixed' );
      $( '.yourDiv' ).css({
        "width" : ""
      })
    }
  })
}(jQuery);

if ( top >= 10 ) 部分可以是任何你想要的。 “10”只是填充 然后就像在网页中调用新功能一样简单!

$(document).ready(function(){
    keepDivWidth();
});

或者，我认为您可以将需要的内容包装在具有行类的 div 中。不过我还没有测试过。