Stick a Div element during Horizontal scroll - html

Question

I am struggling with a layout problem and I hope to find some help to solve it.
I am designing a page with row/lane based content.
Each row has multiple div elements with some content.
So it has to be possible to scroll through the rows vertically as well as horizontally.
Now the problem is, that the first div element inside every row is kind of like the row header, which provides some description about the content of that row.
I want this div element to always stay visible during horizontal scrolling.
Position: fixed is not a option since it would prevent the "row-header" to scroll with its content during a vertical scroll.
What it should look like during a horizontal scroll
Here's the fiddle with my code: https://jsfiddle.net/rco56cbp/
html,
body {
font-family: 'Arial', sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
header {
background: #F7F7F7;
box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.50);
/**/
width: 100%;
height: 90px;
/**/
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 55;
top: 0;
}
/* Left Sidebar */
.side-bar-bg {
width: 130px;
height: 100vh;
z-index: -1;
position: fixed;
background: #F7F7F7;
border: 1px solid #E0E0E0;
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
}
/* Wrapper around main content */
.content-container {
margin-top: 110px;
height:100%;
position:absolute;
width:100%;
}
/* Content elements*/
.lane,
.lane-head,
.phase,
.lane-content {
display: flex;
}
.lane {
margin-bottom: 1.25em;
//flex-direction: row;
align-items: center;
}
.lane-head {
min-width: 130px;
background-color: #ffffff;
box-shadow:0px 0px 0px 1px #BFC0C2 inset;
/* Flex & Layout */
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-self: stretch;
/**/
margin-right: 1em;
}
.lane-label {
font-weight: 500;
font-size: 13px;
color: rgba(82,94,106,0.65);
line-height: 22px;
margin-left: 1em;
margin-right: 1em;
text-align: center;
}
.lane-content {
z-index: -3;
}
/* Grid System */
.col-1 { min-width: 200px; max-width: 200px; }
.col-2 { min-width: 420px; max-width: 420px; }
.col-3 { min-width: 640px; max-width: 640px; }
.col-1, .col-2, .col-3 { margin-right: 20px; }
.textbox {
padding: 0.7em 1em 1.5em 1em;
color: #FFFFFF;
min-width: 200px;
max-width: 200px;
background-color: #78BE20;
}
.phase {
background: #005691;
align-self: stretch;
align-items: center;
padding: 0.6em 1em;
}
/* Typo */
.phase {
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
}
.textbox h3 {
font-weight: bold;
font-size: 16px;
margin: 0 0 0.3em 0;
}
.textbox p {
font-weight: normal;
font-size: 13px;
margin: 0 0;
}
<header>
<h1>Header</h1>
</header>
<div class="side-bar-bg"></div>
<!------ CONTENT ------>
<div class="content-container">
<div class="lane">
<div class="lane-head"><span class="lane-label">Small Boxes</span></div>
<div class="lane-content">
<div class="phase col-2">Lorem Ipsum</div>
<div class="phase col-3">Bacon Ipsum</div>
<div class="phase col-2">Egg Ipsum</div>
</div>
</div>
<div class="lane">
<div class="lane-head"><span class="lane-label">Bigger Boxes</span></div>
<div class="lane-content">
<div class="textbox col-1">
<h3>Aenean commodo</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
</div>
</div>
</div>
The fixed left sidebar shall serve as a background to the "lane-headers".
The reason I want the lane-headers and the lane-content to be inside one div container is that later the whole canvas becomes dynamic and interactive. The content will be generated dynamically and the user will be able to interact with the canvas with drag-drop and so on.
I would appreciate your help very much, thanks in advance!

Answer 1

Hi you need to use javascript as well, once you scroll down or up add a class say posi_stat which will be position:static.and when you do horizontal scrolling just remove the class. In default case it will be position :fixed .
Something like this , you need to remove the class , and add on scrolldown too
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
//your code , what should be done//
}
});
});
Similarly to it for .scrollBottom(); .scrollRight(); .scrollLeft();

Answer 2

Okay I kind of found a solution to it thanks to this: Fixed position in only one direction in future releases of CSS?
Although the javascript solution did not work for me (I still can't figure out why), the CSS solution works pretty good.
By adding the following lines to the .lane-head class the problem was solved:
left: 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
Using the new "position: sticky" property you can perfectly stick any element basically anywhere you want.
Unfortunately Chrome still does not support this yet, but Safari and Firefox do.