JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<header>
	Foo
</header>
<aside>qq</aside>
<main>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
	<p>bar plus det løse</p>
</main>

CSS

* {
	padding: 0;
	margin: 0;
}

header {
	padding: 10px 20px;
	background-color: red;
	color: white;
}
aside {
	padding: 20px;
	top: 0;
	background-color: orange;
	width: 100%;
}
main {
	padding: 20px;
}

JavaScript

var header = document.querySelector("header");
var content = document.querySelector("aside");
var height = header.offsetHeight;
var fixed;
window.addEventListener("scroll", function () {
    if (window.pageYOffset > height) {
		if (!fixed) {
			fixed = true;
			content.style.position = "fixed";
		}
    }
    else if (fixed) {
        fixed = false;
        content.style.position = "";
    }
});