Float text on the left of the screen when horizontal scrolling - html

Question

I'm trying to make a Timetable for a festival in HTML and CSS. A lot of work has been done, but I can't figure this one out. So I made a Timetable using lists 'UL' 'LI' in HTML, with styling in a CSS document.
At the moment it looks like this.
Look at the screenshot here.
Because it is a very huge timetable, there is a horizontal scroll. What I'm trying to figure out is how to let the text of the stage name, for example, 'Har & Mar' to scroll with the page, so it stays on the left when you scroll to the left or right. Because that ain't the case at the moment ;P
I tried everything to fix this problem, but I don't know how to get this done. Please send help! My code is down here:
<iframe width="100%" height="300" src="//jsfiddle.net/CasperBoon/ayjsuLxe/embedded/html,css,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
Best regards,
Casper Boon

Answer 1

If you have any method of selecting which name will be floating, then you can achieve it by applying position: fixed; property to that name's container. According to your code, it should look something like this (for 'Har & Mar'):
CSS
li.stage-0 > .stage-name {
position: fixed !important;
left: 0;
}
I suppose you will want to have all names fixed on the left when scrolling, so it could look like this:
CSS
li > .stage-name {
position: fixed !important;
left: 0;
}

Answer 2

With only css will be really hard.
But using jq or js this become very easy.
Here is how you could do it
I Assumed that show-right-shadow is the scrollable element
$(".show-right-shadow").scroll(function(e){
var left = this.scrollLeft;
$(".stage-name").css(// make all the divs [stage-name] follow the scroll
{
position:"absolute", // use absolute and not fixed, so u dont mess upp the design
left:this.scrollLeft, // follow the scroll
"z-index":9999, // make it at top of all other elements
})
});