sticky header in box

dabblet.css

/**
 * sticky header in box
 */

div
{
	margin: auto;
	width: 16em;
	height: 26em;
	padding: 0 1em;
	overflow: auto;
	background: #eef;
	font: 1.5em/1.5 Georgia;
}

div header
{

	position: -webkit-sticky;
	position: sticky;
	top: 0;
	padding: 0.5em 0;
	background: inherit;
}

div h1,
div h2
{
	margin: 0;
	font-size: 1.3em;
	line-height: 1.2;
}

div h1
{
	margin-bottom: 0.5em;
	font-weight: normal;
}

dabblet.html

<div>
	<header>
		<h1>The Universal Declaration of Human Rights</h1>
		<h2>Article 2</h2>
	</header>
	<p>Everyone is entitled to all the rights and freedoms set forth in this Declaration, without distinction of any kind, such as race, colour, sex, language, religion, political or other opinion, national or social origin, property, birth or other status. Furthermore, no distinction shall be made on the basis of the political, jurisdictional or international status of the country or territory to which a person belongs, whether it be independent, trust, non-self-governing or under any other limitation of sovereignty.</p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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