title: when css position sticky stops sticking
body: <p>I was wondering why <code>position: sticky</code> works for some x-axis-scrolling, but once you scroll past the initial width of the screen width, your 'sticky div', stops sticking.</p>
  <p>In this example, I have a left-side-bar that sticks to the left (please note that I cannot use <code>position: fixed</code> or <code>position: absolute</code>, because in my actual project both the left-div and the right-div need to scroll up and down along the y-axis, hence we only want left-side-sticking)</p>
  <p>is there an additional CSS parameter I can define, such as</p>
  <pre><code>left-sticky-distance=999999%
  </code></pre>
  <p>or something like that?</p>
  <p>some test code illustrating is below</p>
  <pre><code>    &lt;html&gt;
  
  
      &lt;body&gt;
  
      &lt;div style='
      position:sticky;
      z-index:1;
      left:0;
      width:100px;
      height:200px;
      overflow: hidden;
      background-color:#ff0000;
      opacity:0.8;'
      &gt;
  
      &lt;/div&gt;
  
        &lt;div style='position: absolute; top: 10; left: 10; width: 200; height:50px; background-color: blue'&gt;B&lt;/div&gt;
        &lt;div style='position: absolute; top: 10; left: 110; width: 200; height:50px; background-color: blue'&gt;C&lt;/div&gt;
        &lt;div style='position: absolute; top: 10; left: 210; width: 200; height:50px; background-color: blue'&gt;D&lt;/div&gt;
      &lt;/body&gt;
      &lt;html&gt;
  </code></pre>