Skip to content

Instantly share code, notes, and snippets.

@ourmaninamsterdam

ourmaninamsterdam/Flexbox-'sticky'-columns---with-scroll-follow.markdown

Created August 26, 2013 17:46
Show Gist options
  • Save ourmaninamsterdam/6344358 to your computer and use it in GitHub Desktop.
Save ourmaninamsterdam/6344358 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Justin Perry.
Raw
Flexbox-'sticky'-columns---with-scroll-follow.markdown
Raw
Flexbox-sticky-table-row-columns.markdown
Raw
index.html
<div class="wrapper--page">
<header class="flexie header--page is-collapsible">Header</header>
<header class="flexie header--view is-collapsible"> </header>
<section class="flexie-row header--table">
<div class="col-sticky flexie">
<table>
<thead>
<tr>
<th>content 1</th>
</tr>
</thead>
</table>
</div>
<div class="col-scrollable">
<table>
<thead>
<tr>
<th>content 1</th>
<th>content 2</th>
<th>content 3</th>
<th>content 4</th>
</tr>
</thead>
</table>
</div>
</section>
<section class="flexie content--main">
<div class="col-sticky flexie">
<table>
<thead>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
<tr>
<td>content 1</td>
</tr>
</thead>
</table>
</div>
<div class="col-scrollable flexie">
<table>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
</tr>
</table>
</div>
</section>
<nav class="actions">
<button class="js-collapserows">Collapse Header</button>
</nav>
</div>
Raw
script.js
var headerHeight = $('.header--page').height() + $('.header--view').height();
$('.content--main .col-scrollable').on('scroll', function(e){
var scrollLeft = $(this).scrollLeft();
var scrollTop = $(this).scrollTop();
var getMarginTop = function( scrollTop ){
if( scrollTop >= headerHeight){
return headerHeight;
}
else{
return scrollTop;
}
};
var marginTop = getMarginTop( scrollTop );
$('.header--table .col-scrollable').scrollLeft(scrollLeft);
$('.content--main .col-sticky').scrollTop(scrollTop);
$('.header--page').css( {
'margin-top' : -marginTop + 'px'
});
$(this).add('.content--main .col-sticky').css({
'padding-top' : marginTop + 'px'
});
});
$('.js-collapserows').on('click', function(){
$('.wrapper--page .is-collapsible').toggleClass('is-collapsed');
})
Raw
style.scss
@import "compass";
html, body{
font-family: Helvetica;
height: 100%;
min-height: 100%;
overflow: hidden;
}
.wrapper--page{
display: -webkit-flex;
height: 99%;
overflow: hidden;
-webkit-flex-direction: column;
padding-bottom: 10px;
}
.is-collapsed{
display: none;
}
.flexie{
overflow: hidden;
-webkit-flex: auto;
}
.flexie-row{
max-height: 40px;
display: -webkit-flex;
-webkit-flex: auto 0 0;
.col-scrollable{
overflow-y: scroll;
overflow-x: hidden;
}
}
.header--page{
background-color: #ccc;
min-height: 30px;
-webkit-flex-grow: 0;
-webkit-flex-shrink: 0;
}
.header--view{
background-color: #ddd;
height: 130px;
-webkit-flex-grow: 0;
-webkit-flex-shrink: 0;
}
table{
border-collapse: collapse;
border-spacing: 0;
tr:first-child{
background-color: #ccc;
}
tr:nth-child(even){
background-color: #eee;
}
tr:last-child{
background-color: #ccc;
}
td, th{
height: 30px;
font-size: 13px;
padding: 3px;
text-transform: capitalize;
}
th{
background: gray;
text-align: left;
&:hover{
background: darkgray;
}
}
}
.content--main{
display: -webkit-flex;
}
.col-sticky{
-webkit-flex: 1;
border-right: 3px solid #bbb;
table{
width: 100%;
}
}
.content--main .col-sticky{
overflow-x: scroll;
}
.col-scrollable{
-webkit-flex: 8;
overflow: scroll;
table{
width: 1400px;
}
}
.actions{
display: none;
position: fixed;
right: 10px;
top: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment