JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

Stuff above sidebar
<br>
above
<br>
above
<br>
above
<br>

<aside>
	SIDEBAR YEAH
	<p>This sidebar should be sticky.  It seems to work in Chrome and Firefox.</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
</aside>
<!-- Chrome 60: position: sticky doesn't work when wrapped in a parent div  -->
<div>
	<aside>
		SIDEBAR YEAH
		<p>This should also be sticky, but isn't on Chrome or Firefox.  The only difference is that it has a parent div, while the one on the left does not.</p>
		<p>yep</p>
		<p>yep</p>
		<p>yep</p>
		<p>yep</p>
		<p>yep</p>
		<p>yep</p>
	</aside>
</div>

<div class="rel">
	<div class="other">
		<div class="thing">
			<!-- won't work here -->
		</div>
	</div>
</div>


<section>
	MAIN CONTENT YEAH
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
	<p>yep</p>
</section>

CSS

aside {
	width: 25%;
	float: left;
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	background: #fcc;
}

section {
	margin-left: 50%;
	padding: 10px;
	background: #cfc;
}

.rel {
	position: relative;
}

.other {
	margin-top: 40px;
}

.thing {
	width: 80%;
}