Sticky stack

Coding soon

So much time searching all over the internet for such a simple thing. Pure CSS solution. Far from perfect but it looks nice.

Prevent headings overlap
Preserve sections spacing
Fixed sticky elements height (not nice)
Nested sections

stickstack html

<main class="page">
	<section>
		<h1>0 Main</h1>
		<p>Content</p>
		<section>
			<h2>1 One</h2>
			<p>Content</p>
			<section>
				<h3>1.1 One One</h3>
				<section>
					<p>Content</p>
				</section>
			</section>
			<section>
				<h3>1.2 One Two</h3>
				<section>
					<p>Content</p>
				</section>
			</section>
			<section>
				<h3>1.3 One Three</h3>
				<section>
					<p>Content</p>
				</section>
			</section>
		</section>
		<section>
			<h2>2 Two</h2>
			<p>Content</p>
			<section>
				<h3>2.1 Two One</h3>
				<section>
					<p>Content</p>
				</section>
			</section>
			<section>
				<h3>2.2 Two Two</h3>
				<section>
					<p>Content</p>
				</section>
			</section>
		</section>
		<section>
			<h2>3 Three</h2>
			<p>Content</p>
			<section>
				<h3>3.1 Three One</h3>
				<section>
					<p>Content</p>
				</section>
			</section>
			<section>
				<h3>3.2 Three Two</h3>
				<section>
					<p>Content</p>
				</section>
			</section>
			<section>
				<h3>3.3 Three Three</h3>
				<section>
					<p>Content</p>
				</section>
			</section>
		</section>
	</section>
</main>

stickystack css

:root {
	--background: #ffffff;
	--text: #000000;

	--h1-height: 36px;
	--h2-height: 28px;
	--h3-height: 22px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #1a1a1a;
		--text: #bbbbbb;
	}
}

html {
	margin: 0;
	padding: 0;

	width: 100%;
	height: 100%;

	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

body {
	margin: 0;
	padding: 0;

	width: 100%;
	height: 100%;

	background: var(--background);
	color: var(--text);

	font-family: "Courier New", Courier, monospace;
}

h1 {
	font-size: 1.8em;
}

.page {
	box-sizing: border-box;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	padding: 0 8px;
	z-index: 900;
	padding-top: 10%;
	padding-bottom: 100%;
}

.page section > h1,
.page section > h2,
.page section > h3 {
	position: sticky;
	background: var(--background);
	margin: 0;
	padding: 0 4px;
	display: flex;
	align-items: center;
	white-space: pre;
	text-overflow: ellipsis;
}

.page section > h1 {
	height: var(--h1-height);
	top: 0px;
	z-index: 10;
}

.page section > h2 {
	height: var(--h2-height);
	top: var(--h1-height);
	z-index: 9;
}

.page section > h3 {
	height: var(--h3-height);
	top: calc(var(--h1-height) + var(--h2-height));
	z-index: 8;
}

p {
	margin: 0;
	box-sizing: border-box;
	padding: 1.5em 0.3em 2.5em 0.3em;
}