Add absolutely positioned wrapper to allow using position: sticky o…

…n the sidebar

The previous code depended on adding the scroll position to the root element as a custom property.
This resulted in excessive style recalculation which made scrolling laggy.

The api pages, which use separate stylesheets, actually solve this in a good way, by using a grid to define the sidebar area to be next to the main area.

Making the same markup change here results in quite a bit of things needing to be updated.

This commits attempts to apply a similar fix in a non intrusive manner, allowing the page to keep on working the way it did otherwise, but already removing the big performance cost.

_includes/docs.njk

@@ -2,11 +2,13 @@
 layout: "page.njk"
 ---
 
+<div class="fix" style="">
 <aside id="toc">
 <ul>
 {% include "partials/_docs-nav.njk" %}
 </ul>
 </aside>
+</div>
 {{ content | safe }}
 
 {% include "partials/_footer-docs.njk" %}

assets/css/docs.css

@@ -2,6 +2,15 @@ main {
 	position: relative;
 }
 
+@media (min-width: 1480px) {
+	.fix {
+		position: absolute;
+		right: 100%;
+		height: 100%;
+		min-width: 220px;
+	}
+}
+
 #toc {
 	font-size: 75%;
 
@@ -11,16 +20,9 @@ main {
 	}
 
 	@media (min-width: 1480px) {
-		position: fixed;
-		top: 11rem;
-		right: calc(var(--page-width) + var(--page-margin) + 1em);
+		position: sticky;
+		top: 1em;
 		width: fit-content;
-		max-width: calc(var(--page-margin) - 1em);
-		margin-left: 1em;
-
-		@supports (top: max(1em, 1px)) {
-			top: max(0em, 11rem - var(--scrolltop) * 1px);
-		}
 	}
 
 

assets/js/index.js

@@ -9,10 +9,6 @@ if (location.pathname.indexOf("/docs/") > -1 && window.toc) {
 	import("./docs.js");
 }
 
-let root = document.documentElement;
 
 styleCallouts();
 
-document.addEventListener("scroll", evt => {
-	root.style.setProperty("--scrolltop", root.scrollTop);
-}, {passive: true});