Untitled

dabblet.css

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    align-items: stretch;
}

.top {
	height: 20px;
	background: #42f456;
}

.menu {
	height: 20px;
	background: #f49b42;
}

.main {
	display: flex;
	flex: 1;
	background: #ccc;
}

.sidebar {
	flex: 0 0 150px;
	height: 100vh;
	background: #425ff4;
}

.sidebar-inner {
	height: 100vh;
	width: 150px;
	overflow: auto;
	background: blue;
}

.sticky {
	position: fixed;	
	top: 0;	
	bottom: 0;
	padding-bottom: 20px;
	height: auto;
}

.content {
	flex: 1;
	background: #ee42f4;
}

.footer {
	flex: 1;
	height: 20px;
	background: #42e8f4;
	z-index: 1;
}

dabblet.html

<div class="container">
	<header class="top">top</header>
	<header class="menu">menu</header>
	<div class="main">
		<div id="sidebar" class="sidebar">
			<div class="sidebar-inner">
				<p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p>
				<p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p>
				<p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p>
				<p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p><p>sidebar</p>
			</div>
		</div>
		<div class="content">
			<p>Scrolling Content</p><p>Scrolling Content</p><p>Scrolling Content</p><p>Scrolling Content</p>
			<p>Scrolling Content</p><p>Scrolling Content</p><p>Scrolling Content</p><p>Scrolling Content</p>
			<p>Scrolling Content</p><p>Scrolling Content</p><p>Scrolling Content</p><p>Scrolling Content</p>
			<p>Scrolling Content</p><p>Scrolling Content</p><p>Scrolling Content</p><p>Scrolling Content</p>
			<p>Scrolling Content</p><p>Scrolling Content</p><p>Scrolling Content</p><p>Scrolling Content</p>
			<p>Scrolling Content</p><p>Scrolling Content</p><p>Scrolling Content</p><p>Scrolling Content</p>
			<p>Scrolling Content</p><p>Scrolling Content</p><p>Scrolling Content</p><p>Scrolling Content</p>
		</div>
	</div>
	<footer class="footer">footer</footer>
</div>

dabblet.js

const sidebar = document.querySelector('.sidebar-inner');
const sidebarTopOriginal = sidebar.getBoundingClientRect().top;

window.addEventListener('scroll', () => {	
	window.scrollY >= sidebarTopOriginal ?
		sidebar.classList.add('sticky') :
		sidebar.classList.remove('sticky');
});

settings.json

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