Skip to content

Instantly share code, notes, and snippets.

/index.html

Created January 27, 2016 15:44
Show Gist options
  • Save anonymous/9f32c82b9b2ff63d12a1 to your computer and use it in GitHub Desktop.
Save anonymous/9f32c82b9b2ff63d12a1 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/jesevi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
#s4-workspace {
position: fixed;
top: 150px;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
background: white;
border-top: 1px solid red;
}
td, th {
padding: 10px 5px;
border-bottom: 1px solid #ccc;
}
table.fixedHeader {
color: green;
}
table.fixedHeader > thead > tr {
position: fixed;
}
#s4scrollPosition:before {
content: 'Current #s4-workspace scroll position: ';
}
#tableScrollPosition:before {
content: 'Current table scroll position: ';
}
#calculatedTableScrollPosition:before {
content: 'Calculated table scroll position: ';
}
#fixedHeader {
display: none;
background: lightgreen;
padding: 5px;
}
</style>
</head>
<body>
<div id="s4-workspace">
<h1>Scroll Sandbox</h1>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<table id="table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</tbody>
</table>
<h2>Moar Content</h2>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
<p>“Everyone should learn how to program a computer because it teaches you how to think” — Steve Jobs</p>
</div>
<div id="s4scrollPosition"></div>
<div id="tableScrollPosition"></div>
<div id="calculatedTableScrollPosition"></div>
<div id="fixedHeader">Header is fixed</div>
<script id="jsbin-javascript">
var $s4workspace = $( '#s4-workspace' ),
s4workspaceOffsetTop = $s4workspace.offset().top,
$table = $( '#table' ),
tableHeight = $table.height(),
theadHeight = $table.find( 'thead' ).height();
console.log( tableHeight );
// log the scrolling
var fixedHeader = function () {
var calculatedPositionTop = parseInt( $table.offset().top - s4workspaceOffsetTop );
$( '#s4scrollPosition' ).text( $s4workspace.scrollTop() );
$( '#tableScrollPosition' ).text( Math.round( $table.offset().top , 0 ) );
$( '#calculatedTableScrollPosition' ).text( calculatedPositionTop );
// show/hide headers
if( calculatedPositionTop < 0 && Math.abs( calculatedPositionTop ) < tableHeight ) {
$( '#fixedHeader' ).show();
$table.addClass( 'fixedHeader' );
} else {
$( '#fixedHeader' ).hide();
$table.removeClass( 'fixedHeader' );
}
};
fixedHeader(); // init the comments
// bind log to scrolling
$s4workspace.on( 'scroll', fixedHeader );
// fix the thead hight, even if the tr inside is removed
$table.find( 'thead' ).css( 'height', theadHeight );
// add style for fixed headers
$('<style>table.fixedHeader > thead > tr { top: ' + s4workspaceOffsetTop + 'px }</style>').appendTo( 'head' );
</script>
<script id="jsbin-source-css" type="text/css">#s4-workspace {
position: fixed;
top: 150px;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
background: white;
border-top: 1px solid red;
}
td, th {
padding: 10px 5px;
border-bottom: 1px solid #ccc;
}
table.fixedHeader {
color: green;
}
table.fixedHeader > thead > tr {
position: fixed;
}
#s4scrollPosition:before {
content: 'Current #s4-workspace scroll position: ';
}
#tableScrollPosition:before {
content: 'Current table scroll position: ';
}
#calculatedTableScrollPosition:before {
content: 'Calculated table scroll position: ';
}
#fixedHeader {
display: none;
background: lightgreen;
padding: 5px;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var $s4workspace = $( '#s4-workspace' ),
s4workspaceOffsetTop = $s4workspace.offset().top,
$table = $( '#table' ),
tableHeight = $table.height(),
theadHeight = $table.find( 'thead' ).height();
console.log( tableHeight );
// log the scrolling
var fixedHeader = function () {
var calculatedPositionTop = parseInt( $table.offset().top - s4workspaceOffsetTop );
$( '#s4scrollPosition' ).text( $s4workspace.scrollTop() );
$( '#tableScrollPosition' ).text( Math.round( $table.offset().top , 0 ) );
$( '#calculatedTableScrollPosition' ).text( calculatedPositionTop );
// show/hide headers
if( calculatedPositionTop < 0 && Math.abs( calculatedPositionTop ) < tableHeight ) {
$( '#fixedHeader' ).show();
$table.addClass( 'fixedHeader' );
} else {
$( '#fixedHeader' ).hide();
$table.removeClass( 'fixedHeader' );
}
};
fixedHeader(); // init the comments
// bind log to scrolling
$s4workspace.on( 'scroll', fixedHeader );
// fix the thead hight, even if the tr inside is removed
$table.find( 'thead' ).css( 'height', theadHeight );
// add style for fixed headers
$('<style>table.fixedHeader > thead > tr { top: ' + s4workspaceOffsetTop + 'px }</style>').appendTo( 'head' );</script></body>
</html>
Raw
jsbin.jesevi.css
#s4-workspace {
position: fixed;
top: 150px;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
background: white;
border-top: 1px solid red;
}
td, th {
padding: 10px 5px;
border-bottom: 1px solid #ccc;
}
table.fixedHeader {
color: green;
}
table.fixedHeader > thead > tr {
position: fixed;
}
#s4scrollPosition:before {
content: 'Current #s4-workspace scroll position: ';
}
#tableScrollPosition:before {
content: 'Current table scroll position: ';
}
#calculatedTableScrollPosition:before {
content: 'Calculated table scroll position: ';
}
#fixedHeader {
display: none;
background: lightgreen;
padding: 5px;
}
Raw
jsbin.jesevi.js
var $s4workspace = $( '#s4-workspace' ),
s4workspaceOffsetTop = $s4workspace.offset().top,
$table = $( '#table' ),
tableHeight = $table.height(),
theadHeight = $table.find( 'thead' ).height();
console.log( tableHeight );
// log the scrolling
var fixedHeader = function () {
var calculatedPositionTop = parseInt( $table.offset().top - s4workspaceOffsetTop );
$( '#s4scrollPosition' ).text( $s4workspace.scrollTop() );
$( '#tableScrollPosition' ).text( Math.round( $table.offset().top , 0 ) );
$( '#calculatedTableScrollPosition' ).text( calculatedPositionTop );
// show/hide headers
if( calculatedPositionTop < 0 && Math.abs( calculatedPositionTop ) < tableHeight ) {
$( '#fixedHeader' ).show();
$table.addClass( 'fixedHeader' );
} else {
$( '#fixedHeader' ).hide();
$table.removeClass( 'fixedHeader' );
}
};
fixedHeader(); // init the comments
// bind log to scrolling
$s4workspace.on( 'scroll', fixedHeader );
// fix the thead hight, even if the tr inside is removed
$table.find( 'thead' ).css( 'height', theadHeight );
// add style for fixed headers
$('<style>table.fixedHeader > thead > tr { top: ' + s4workspaceOffsetTop + 'px }</style>').appendTo( 'head' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment