使用固定位置的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

回答

相關問題