title: Bootstrap floating panel
body: <p>I have designed a Bootstrap two column layout <code>col-md-6</code>. A row with a panel on top with a <code>table</code>, a left column <code>panel</code> with a list of <code>media</code> items, and a right column with a panel hat contains text.</p>
  
  <p><a href="https://i.stack.imgur.com/sZHa0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sZHa0.png" alt="enter image description here"></a></p>
  
  <p>The contents are in a <code>container-fluid</code> layout. When scrolling the page, while the left panel <code>&lt;ul/&gt;</code> list can scrolls down, the right column panel will disappear from the view.</p>
  
  <p>I want to keep this <code>panel-text</code> stuck to the viewable area below the <code>panel-summary</code>.
  I have applied a <code>fixed</code> position with a <code>translateY(0px);</code> transform to the row containing that panel:</p>
  
  <pre><code>.row-floating {
      position: fixed;
      margin-top: 0px;
      top: 60px;
      transform: translateY(0px);
  }
  </code></pre>
  
  <p>The problem is that, while scrolling the <code>panel-text</code> will overrides the <code>panel-summary</code> anyways, while it should stay stuck below this panel:</p>
  
  <p><a href="https://i.stack.imgur.com/5eNSz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5eNSz.png" alt="enter image description here"></a></p>
  
  <p>JSFiddle <a href="https://jsfiddle.net/5je5d18g/2/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>The solution proposed works, so I have updated the Fiddler <a href="https://jsfiddle.net/wkj5orhq/" rel="nofollow noreferrer">here</a> adding</p>
  
  <ul>
  <li><p>a <code>webkit-transform</code> to avoid possible flickering while Y-scrolling:</p>
  
  <pre><code>.row-floating {
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
  }
  </code></pre></li>
  </ul>
  
  <p>a offset from top to keep the panel at bottom of the <code>navbar</code> (+44px):</p>
  
  <pre><code>$('.panel-floating').css('position', 'fixed').css('top', 44.0).css('width',actualWidth);
  </code></pre>