title: How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
body: <p>I have a two columns layout like this:</p>
  
  <pre><code> &lt;div class="row"&gt;
      &lt;div class="col-xs-8 content"&gt; 
      &lt;/div&gt;
      &lt;div class="col-xs-4"&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>If I set the <code>position:sticky</code> to the sidebar column, I get the sticky behaviour of the sidebar: <a href="https://codepen.io/marcanuy/pen/YWYZEp" rel="noreferrer">https://codepen.io/marcanuy/pen/YWYZEp</a></p>
  
  <p>CSS:</p>
  
  <pre><code>.sticky {
    position: sticky;
    top: 10px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class="row"&gt;
      &lt;div class="col-xs-8 content"&gt; 
      &lt;/div&gt;
      &lt;div class="col-xs-4 sticky"&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>But when I set the <code>sticky</code> property <strong>only</strong> to the <strong>menu</strong> that is located in the sidebar, so the <em>related articles</em> section scrolls normally and gets the <em>sticky</em> behaviour with the <em>menu div</em>, it doesn't work:</p>
  
  <pre><code> &lt;div class="row"&gt;
      &lt;div class="col-xs-8 content"&gt; 
      &lt;/div&gt;
      &lt;div class="col-xs-4"&gt;
         &lt;div class="menu sticky"&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>This is the screencast of the first example scrolling the whole sidebar with a sticky behaviour, and then changing the sticky property to the menu that doesn't work:</p>
  
  <p><a href="https://i.stack.imgur.com/wYJDo.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/wYJDo.gif" alt="enter image description here"></a></p>
  
  <p>Bootstrap 4 <a href="http://v4-alpha.getbootstrap.com/migration/#components" rel="noreferrer">recommends</a> the <strong>sticky</strong> property as the dropped support for the Affix jQuery plugin:</p>
  
  <blockquote>
    <p>Dropped the Affix jQuery plugin. We recommend using a position: sticky polyfill instead.</p>
  </blockquote>
  
  <p>I have tested it in:</p>
  
  <ul>
  <li><p>Firefox 47.0 with <code>css.sticky.enabled=“true”</code> under <code>about:config</code> </p></li>
  <li><p>Chrome 50.0.2661.94 (64-bit) with <code>experimental Web Platform features</code> enabled in <code>chrome://flags</code> </p></li>
  </ul>
  
  <p>(This is not a duplicate of <a href="https://stackoverflow.com/q/37645566/1165509">How to make a sticky sidebar in Bootstrap?</a> because that one is using BS affix)</p>