html - How do I create a sticky header (scrolls along x-axis) and sidebar (scrolls along y-axis), which scroll with the page content -

i'm trying create list of content sticky header , sticky sidebar.

as scroll down page content, want sidebar scroll down too. scroll left , right on page, want header scroll along it.

much - http://tv.sky.com/tv-guide

i want time along header , screens down sidebar can't figure out css apply achieve this.

<div class="container">    <div class="timeline">      <ul>       <li>&nbsp;</li>       <li>|10am</li>       <li>|10am</li>       <li>|11am</li>       <li>|12pm</li>       <li>|1pm</li>       <li>|2pm</li>       <li>|3pm</li>       <li>|4pm</li>       <li>|5pm</li>       <li>|6pm</li>       <li>|7pm</li>       <li>|8pm</li>       <li>|9pm</li>       <li>|10pm</li>       <li>|11pm</li>     </ul>   </div>    <div class="screens">     <ul>       <li>screen 1</li>       <li>screen 2</li>       <li>screen 3</li>       <li>screen 4</li>       <li>screen 5</li>       <li>screen 6</li>       <li>screen 7</li>       <li>screen 8</li>       <li>screen 9</li>       <li>screen 10</li>     </ul>   </div>  </div> 

just apply rule element want position: fixed; , use top: somepixel left: somepixel right:somepixel bottom:somepixel control position of element , use overflow-x , and overflow-y rules control scroll along respective directions