title: Is this possible without using javascript?
body: <p>I made a simple web UI with JSFiddle and I am wondering if the same UI can be made <strong>without using JavaScript</strong>.</p>
  
  <p><a href="http://jsfiddle.net/memetolsen/5z3nLqq5/" rel="nofollow">A Fiddle</a> says more than 1000 words.</p>
  
  <p>So the question is (because it seems unclear for some people): <strong>How can I achieve the same results without using any JavaScript?</strong></p>
  
  <p>PS: I don't want to use JavaScript to re-calculate the position on every scroll event because the repositioning in IE is not smooth enough.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="A"&gt;
      &lt;div class="B"&gt;
          B
      &lt;/div&gt;
  
      &lt;div class="C"&gt;
          This stays fixed when scrolling horizontally, but scrolls along when scrolling down the parent.
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.A {
      background-color: yellow;
      height: 400px;
      width: 700px;
      overflow:scroll;
      position: relative;
  }
  
  .B {
      background-color: green;
      height: 1000px;
      width: 1500px;
      position: absolute;
      top:0;
      color:white;
  }
  
  .C {
      background-color: red;
      position: absolute;
      left: 100px;
      top: 0px;
      height: 1000px;
      width: 100px;
  }
  </code></pre>
  
  <p>JS (with jQuery):</p>
  
  <pre><code>$('.A').scroll(function(e) {
      $('.C').css('left', e.target.scrollLeft + 100);
  });
  </code></pre>