title: How do I create a sticky header (scrolls along x-axis) and sidebar (scrolls along y-axis), which scroll with the page content
body: <p>I'm trying to create a list of content with a sticky header and sticky sidebar.</p>
  
  <p>As I scroll down the page content, I want the sidebar to scroll down too.
  As I scroll left and right on the page, I want the header to scroll along with it.</p>
  
  <p>Much like this - <a href="http://tv.sky.com/tv-guide" rel="nofollow">http://tv.sky.com/tv-guide</a></p>
  
  <p>I want time along the header and screens down the sidebar but can't figure out what CSS to apply to achieve this.</p>
  
  <pre><code>&lt;div class="container"&gt;
  
    &lt;div class="timeline"&gt;
  
  
     &lt;ul&gt;
        &lt;li&gt;&amp;nbsp;&lt;/li&gt;
        &lt;li&gt;|10am&lt;/li&gt;
        &lt;li&gt;|10am&lt;/li&gt;
        &lt;li&gt;|11am&lt;/li&gt;
        &lt;li&gt;|12pm&lt;/li&gt;
        &lt;li&gt;|1pm&lt;/li&gt;
        &lt;li&gt;|2pm&lt;/li&gt;
        &lt;li&gt;|3pm&lt;/li&gt;
        &lt;li&gt;|4pm&lt;/li&gt;
        &lt;li&gt;|5pm&lt;/li&gt;
        &lt;li&gt;|6pm&lt;/li&gt;
        &lt;li&gt;|7pm&lt;/li&gt;
        &lt;li&gt;|8pm&lt;/li&gt;
        &lt;li&gt;|9pm&lt;/li&gt;
        &lt;li&gt;|10pm&lt;/li&gt;
        &lt;li&gt;|11pm&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div class="screens"&gt;
      &lt;ul&gt;
        &lt;li&gt;Screen 1&lt;/li&gt;
        &lt;li&gt;Screen 2&lt;/li&gt;
        &lt;li&gt;Screen 3&lt;/li&gt;
        &lt;li&gt;Screen 4&lt;/li&gt;
        &lt;li&gt;Screen 5&lt;/li&gt;
        &lt;li&gt;Screen 6&lt;/li&gt;
        &lt;li&gt;Screen 7&lt;/li&gt;
        &lt;li&gt;Screen 8&lt;/li&gt;
        &lt;li&gt;Screen 9&lt;/li&gt;
        &lt;li&gt;Screen 10&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>