고정 위치 div가있는 부트 스트랩 그리드 사용

Question

부트 스트랩 그리드 레이아웃을 사용하려고하지만 페이지를 아래로 스크롤 할 때 수직으로 고정 된 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를 고정하려면 어떻게해야합니까? 또한 부트 스트랩에서 설정 한 격자 레이아웃을 준수해야합니까?

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에 필요한 항목을 행 클래스로 묶을 수 있다고 생각합니다. 나는 아직 그것을 테스트하지 않았다.