title: Fix items only horizontally or vertically in the same scroll container
body: <p>I need to build a tv guide like this one:</p>
  
  <p><a href="https://www2.telenet.be/content/dam/www-telenet-be/klantenservice/kijken/EPG_replay_fr.png" rel="nofollow noreferrer"><img src="https://www2.telenet.be/content/dam/www-telenet-be/klantenservice/kijken/EPG_replay_fr.png" alt="TV Guide"></a></p>
  
  <ul>
  <li><p>If the user scrolls horizontally in the guide, the timebar should scroll but the channel list should stay fixed.</p></li>
  <li><p>If the user scrolls vertically in the guide, the timebar should stay fixed but the channel list should scroll.</p></li>
  </ul>
  
  <p>Is this possible with only using CSS? I'd rather not use JS to solve this because of the performance.</p>
  
  <p>I tried to make 2 scroll containers, 1 horizontal and 1 vertical, but I am only able to get 1 of the prerequisites right.
  Here's the CodePen: <a href="https://codepen.io/anon/pen/xJbEJK" rel="nofollow noreferrer">CodePen</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #333;
  }
  
  .page {
    width: 1000px;
    height: 1000px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }
  
  .horscroll {
    width: 1000px;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
  }
  
  .timebar {
    background-color: red;
    width: 5000px;
    height: 50px;
    position: absolute;
    top: 0;
  }
  
  .vertscroll {
    width: 5000px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    margin-top: 50px;
  }
  
  .channel-list {
    background-color: green;
    width: 200px;
    height: 10000px;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .content {
    width: 5000px;
    height: 10000px;
    margin-left: 200px;
    background-color: cyan;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="page"&gt;
    &lt;div class="horscroll"&gt;
      &lt;div class="timebar"&gt;timeline&lt;/div&gt;
      &lt;div class="vertscroll"&gt;
        &lt;div class="channel-list"&gt;channel list&lt;/div&gt;
        &lt;div class="content"&gt;grid&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can you guys help me? </p>
  
  <p>Many thanks in advance!</p>
  
  <p>UPDATE:</p>
  
  <p>I also need a solution without position sticky since this is not supported in IE. The answer by Maharkus below is correct but it does not work in IE.</p>