Untitled

dabblet.css

body { margin: 0; }

.box {
	background:green;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: scroll;
	padding-top: 200px;
}

.top-area {
	background: orange;
	width: 100%;
	height: 200px;
	position: fixed;
	top: 0;
	left: 0;
}


.item {
	background: purple;
	height: 20px;
	margin-bottom: 10px;
}

.item:nth-child(odd) {
	background: black;
}

dabblet.html

<div class="box">
	<div class="top-area"></div>
	<div class="bottom-area">
		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}