Make sticky header implementation more robust

[MisRob]

For topic pages, we implemented a logic

kolibri/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue

Lines 660 to 676 in 967a02d

	stickyCalculation() {
	const header = this.$refs.header && this.$refs.header.$el;
	const topbar = document.querySelector('.scrolling-header');
	const headerBottom = header ? header.getBoundingClientRect().bottom : 0;
	const topbarBottom = topbar ? topbar.getBoundingClientRect().bottom : 0;
	if (headerBottom < Math.max(topbarBottom, 0)) {
	this.sidePanelStyleOverrides = {
	position: 'fixed',
	top: `${Math.max(0, headerBottom, topbarBottom)}px`,
	height: '100%',
	};
	} else {
	this.sidePanelStyleOverrides = {};
	}
	},

that makes the sidebar sticky

The main idea of the current implementation is based on switching the sidebar between position: absolute and position: fixed. However, this approach, under certain circumstances (presence of the sidebar, page height), seems to be the main culprit of the jumping scrollbar problem described in #10414 (which contains a somewhat fragile solution).

In the past, we used a different approach where we didn't switch position but re-calculated the top position

kolibri/kolibri/plugins/learn/assets/src/views/TopicsPage.vue

Lines 662 to 678 in c6a6095

	stickyCalculation() {
	let header = document.getElementsByClassName('header')[0];
	let topbar = document.getElementsByClassName('ui-toolbar')[0];
	if (header) {
	let position = header.getBoundingClientRect();
	let topbarPosition = topbar.getBoundingClientRect();
	if (position.bottom >= 64) {
	this.stickyTop = `${position.bottom}px`;
	} else if (position.bottom < 0 && topbarPosition.bottom < 0) {
	this.stickyTop = '0px';
	} else {
	this.stickyTop = '64px';
	}
	} else {
	null;
	}
	},

however, that was one of the causes of the header being torn away from the sidebar completely (#8627) or temporarily which could be seen as the sidebar updating its position with delay, causing observable gaps between the sidebar and the header, as it took some time for the browser to re-render sidebar's top position.

Lastly, the current implementation is not very efficient as styles are re-calculated with each scroll event. There's throttling which helps, however, it could be improved further as there's no need to re-calculate styles under some conditions, for example when the sidebar is in its sticky state and we're scrolling down, we know that no change is needed.

It'd be good to think about a more robust and efficient approach that would also avoid the pitfalls of our previous implementation.

[MisRob]

If we're going to move towards IE11 deprecation, one way to go would be using native position: sticky. I assume that the main reason for implementing our custom logic was that position: sticky is no supported in IE11.

[MisRob]

Depending on the complexity of the new solution, it may be done as part of #10415 or after. I wanted to experiment with some different approaches originally that would require page layout changes and found it difficult due to issues described in #10415.