A Pen by fakhar.

index.html

<div id="page">
<div id="header">
<div id="element">
	<table cellpadding="10" cellspacing="3" style="width: 100%">
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</table>
			<div class="clear">&nbsp;</div>
</div>
</div>
</div>

JclKn.markdown

JclKn

A Pen by fakhar on CodePen.

License.

script.js

$(document).ready(function() {
	$(window).scroll(function() {
	var scroll = $(window).scrollTop();
	var topp = parseInt(scroll)*2;
	var nt = "-"+topp+"px";
	if(topp >= 1) {
	$("#element").css('top', nt);
	}
	else {
	$("#element").css('top' , '0px')
	}
	})
})

style.css

#page {
	position:absolute;
	display:block;
	width:100%;
	height:1500px;
	background:#CCFFCC;
	left:0;
	top:0;
}
#header {
	position:relative;
	display:block;
	width:96%;
	margin-left:2%;
	height:650px;
	margin-top:25px;
	overflow:hidden;
	border:2px #aaa solid;
	z-index:5;
	counter-reset:trcount;
}
#element {
	position:absolute;
	display:block;
	top:0px;
	left:0;
	width:100%;
	height:auto;
	clear:both;	
	z-index:3;
	counter-reset:tdcount;
}
#element table {
	table-layout:fixed;
}
#element table td {
height:45px;
counter-increment:tdcount;
border:1px #aaa solid;
}
#element table tr {
counter-increment:trcount;
}
#element table td:before {
color:#FFF;
content:counter(trcount) '-' counter(tdcount);
}


.clear {
	clear:both;
	display:block;
}
#element table tr:nth-child(1) {
	background:#663;
}
#element table tr:nth-child(2) {
	background:#633;
}
#element table tr:nth-child(3) {
	background:#366;
}
#element table tr:nth-child(4) {
	background:#08E;
}
#element table tr:nth-child(5) {
	background:#306;
}
#element table tr:nth-child(6) {
	background:#6F3;
}
#element table tr:nth-child(7) {
	background:#F30;
}
#element table tr:nth-child(8) {
	background:#03F;
}
#element table tr:nth-child(9) {
	background:#F66;
}
#element table tr:nth-child(10) {
	background:#033;
}
#element table tr:nth-child(11) {
	background:#663;
}
#element table tr:nth-child(12) {
	background:#633;
}
#element table tr:nth-child(13) {
	background:#366;
}
#element table tr:nth-child(14) {
	background:#08E;
}
#element table tr:nth-child(15) {
	background:#306;
}
#element table tr:nth-child(16) {
	background:#6F3;
}
#element table tr:nth-child(17) {
	background:#F30;
}
#element table tr:nth-child(18) {
	background:#03F;
}
#element table tr:nth-child(19) {
	background:#F66;
}
#element table tr:nth-child(20) {
	background:#033;
}
#element table tr:nth-child(21) {
	background:#663;
}
#element table tr:nth-child(22) {
	background:#633;
}
#element table tr:nth-child(23) {
	background:#366;
}
#element table tr:nth-child(24) {
	background:#08E;
}
#element table tr:nth-child(25) {
	background:#306;
}
#element table tr:nth-child(26) {
	background:#6F3;
}
#element table tr:nth-child(27) {
	background:#F30;
}
#element table tr:nth-child(28) {
	background:#03F;
}
#element table tr:nth-child(29) {
	background:#F66;
}
#element table tr:nth-child(30) {
	background:#033;
}