使用固定位置的div

我试图用引导网格布局引导电网，也与你向下滚动页面，垂直固定一个DIV。为了修复div，我使用'position：fixed'，但是这似乎打破了包含类。文本溢出到下一列，它不应该这样做。使用固定位置的div

<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设置的网格布局？

来源

2014-02-26 RamblerToning

[affix]（http://getbootstrap.com/javascript/#affix）能帮助你吗？ – lavrik

看到这个答案：http://stackoverflow.com/a/6794097/171456 – ZimSystem

所以我必须有该div完全分开，在引导网格之外？有没有办法让它在调整大小时崩溃，就像col-md-3所做的那样？ – RamblerToning

我解决这个问题的方法是让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(); 
});

或者，我认为你可以在行中使用class来包装你需要的东西。尽管如此，我还没有测试过。

来源

2014-10-05 00:46:17 kevMul

使用固定位置的div

回答

相关问题