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类来包装你需要的div。我还没有测试过。

使用带固定位置div的Bootstrap网格

1 个答案: