javascript - Horizontal scrolling with sticky div that stays on the left border

Question

I have two rows of data (green) and a header (red), which should be visible at all times:

Check out the example I already have:

http://jsfiddle.net/j9C8R/33/

Now the red header scrolls away together with the content, but it should stick to where it is now, but scroll vertically with the content (MS Excel style).

How can this be achieved (preferably with only CSS).

UPDATE: It is important that the red headers scroll vertically along with the corresponding content but stick to the left edge when scrolling horizontally.

.main {
  background-color: blue;
  overflow: scroll;
  height: 200px;
  width: 400px;
}

.row {
  height: 50px;
  overflow: scroll;
  clear: both;
  width: 1000px;
  background-color: yellow;
}

.sticky,
.content {
  float: left;
  width: 150px;
  border: 1px solid black;
}

.sticky {
  background-color: red;
}

.content {
  background-color: green;
}

<div class="main">
  <div class="row">
    <div class="sticky">Sticky header A</div>
    <div class="content">ContentA</div>
    <div class="content">ContentA</div>
    <div class="content">ContentA</div>
    <div class="content">ContentA</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header B</div>
    <div class="content">ContentB</div>
    <div class="content">ContentB</div>
    <div class="content">ContentB</div>
    <div class="content">ContentB</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header C</div>
    <div class="content">ContentC</div>
    <div class="content">ContentC</div>
    <div class="content">ContentC</div>
    <div class="content">ContentC</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header D</div>
    <div class="content">ContentD</div>
    <div class="content">ContentD</div>
    <div class="content">ContentD</div>
    <div class="content">ContentD</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header E</div>
    <div class="content">ContentE</div>
    <div class="content">ContentE</div>
    <div class="content">ContentE</div>
    <div class="content">ContentE</div>
  </div>
</div>

Answer 1

UPDATE

please note the below is now a little out of date as we have css position sticky

Original Post

I do not think it is possible to achieve your goal through pure css as items that are sticky usually use position:fixed which unfortunately fixes them relative to the viewport.

with the use of javascript (in this case the jquery library) and absolute positioning, you should be able to achieve what you are after:

new styles:

.row {
    height:50px;
    overflow:scroll;
    clear:both;
    width:1000px;
    position:relative; //for the absolute positioning of sticky
    background-color:yellow;
    padding-left:150px; //this is the size of your sticky column so it doesn't cover content when fully left
    box-sizing:border-box;//this is so the padding doesn't add extra width to your 1000px
}

.sticky {
    background-color:red;
    position:absolute; left:0; top:0;
}

javascript:

$('.main').scroll(function() {
    $(this).find('.sticky').css('left', $(this).scrollLeft());
});

http://jsfiddle.net/j9C8R/36/