[Malleys]

Частично вопрос решается заменой fixed на sticky

Ваш вопрос полностью решается при помощи position: sticky;, это универсальное решение, которое очень хорошо поддерживается всеми браузерами (для iOS Safari липучее позиционирование работает с префиксом position: -webkit-sticky;) https://caniuse.com/#feat=mdn-css_pr...osition_sticky

<div class="sidebar">
	<div id="scrollable">
		<div id="fixed">
			position:fixed
		</div>
		Scrolling content<br><br><br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку.
		<br><br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый
		к потолку.
		<br><br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый
		к потолку.
		<br><br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый
		к потолку.
		<br><br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?

	</div>
</div>

<style>

.sidebar {
	background: #fff;
	width: 100%;
	border: 1px solid red;
}
#scrollable {
	overflow-y: auto;
	height: 200px;
}
#fixed {
	background: #76a7dc;
	color: #fff;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	height: 50px;
	width: 100%;
}
::-webkit-scrollbar {
	width: 1em;
	background: #eee;
}
::-webkit-scrollbar-thumb {
	background: #ccc;
	border: 0.2em solid #eee;
	border-radius: 1em;
}

</style>

не поддерживается старыми браузерами

Данный пример не ломается в старых браузерах, никто из живых людей не сидит в интернете в старых браузерах, поскольку происходит автоматическое обновление, а если кто-то и умудрился что-то запустить в старом браузере, то популярные сайты вам скажут об этом и посоветуют скачать новый браузер без проблем.

Живые люди используют в повседневной жизни Chrome (больше всего для Android, затем для компьютера), iOS Safari, в меньшей степени Firefox и Edge, в этих браузерах всё работает нормально, а остальное используют, либо боты, либо тестировщики, либо какие-то особо малочисленные и редкие люди, которые получают оргазм от просмотра поломанного YouTube!

рони, в вашем примере содержимое заезжает под область с фиксированным контентом, т. е. её не видно, а сама область с фиксированным контентом не сможет содержать элементы, на которые можно будет нажать!