Sticky

dabblet.css

/**
 * Sticky
 */
html, body {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	height: 200%;
}

body {
	margin: 0;
	padding: 100px 100px 50%;
}

.first {
	height: 100%;
	background: green;
}

.second {
	height: 50%;
}

.inner {
	position: sticky;
	top: 0;
	color: white;
	min-height: 20%;
	width: 30%;
}

.second:first-child .inner {
	background: red;
}
.second:last-child .inner {
	background: blue;
}

dabblet.html

<div class="first">
<div class="second"><div class="inner">sticky1</div></div>
<div class="second"><div class="inner">sticky2</div></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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