Horizontal scrolling with a sticky div that stays on the left border

Question

I have two lines of data (green) and a header (red) that should be visible at any time:

Check out the example that I already have:

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

This is my current HTML:

<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> 

And CSS:

 .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; } 

Now the red title scrolls along with the content, but it should adhere to where it is now, but scroll vertically with the content (MS Excel style).

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

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

Answer 1

UPDATE

please note that the below is a bit outdated since we have a css position

Original message

I don’t think you can achieve your goal with pure CSS, because the elements that are attached usually use position:fixed , which unfortunately fixes them relative to the viewport.

using javascript (in this case, the jquery library) and absolute positioning, you can achieve what you want:

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 does not cover content when fully left box-sizing:border-box;//this is so the padding does not 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/

Answer 2

Ok, I broke your thing and made a whole new one, I just did not wrap things inside the container relative position, but you can do it at least

For vertical scrolling things are simple, but if you expect horizontal scrolling and move the headers, (CSS Wont Just Do It)

Demo

CSS

 .head { background-color: #f00; width: 300px; position: absolute; left: 100px; } .head table { width: 100%; } .body { position: relative; left: 100px; top: 20px; width: 300px; height: 50px; overflow-y: auto; } .body table { width: 100%; } .body td { width: 100px; } .head table td { width: 100px; } .left { position: absolute; background-color: #0f0; width: 90px; top: 40px; }