Sticky Top

dabblet.css

/**
 * Sticky Top
 */
html, body {
	font-family: sans-serif;
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
}

html {
	/*height: 100%;*/
}

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

.box {
	background: green;
	box-sizing: border-box;
	border: dashed 3px rgba(255,255,255, 0.5);
}

.inner {
	position: sticky;
	right: 0;
	top: 0;
	color: white;
	height: 1000px;
	width: 30%;
	box-sizing: border-box;
	background: blue;
	border: dashed 3px;
}

.content {
	height: 3000px;
	width: 65%;
	color: #fff;
	box-sizing: border-box;
	background: red;
	border: dashed 3px;
}

.content,
.inner {
	display: inline-block;
	padding: 10px;
	vertical-align: top;
	letter-spacing: 1px;
}

dabblet.html

<div class="box">
<div class="content">CONTENT<b>COLUMN</b></div>
<div class="inner">STICKY<b>TOP</b></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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