1 files changed, 21 insertions, 2 deletions
diff --git a/templates/partials/doc/toc_script.html b/templates/partials/doc/toc_script.html
index a858c94..df115b0 100644
--- a/templates/partials/doc/toc_script.html
+++ b/templates/partials/doc/toc_script.html
@@ -1,9 +1,29 @@
-<script type="text/javascript">
+<script>
 
 const menuBarHeight = document.querySelector("nav.navbar").clientHeight;
+const mainTocMenuWidth = document.getElementById('main-toc-menu').clientWidth;
 const tocItems = document.querySelectorAll(".toc");
 const navSections = new Array(tocItems.length);
 
+ // Global ToC
+/*
+    Fixed ToC when user scrolls.
+*/
+
+window.addEventListener('scroll', function() {
+    if (window.scrollY >= menuBarHeight) {
+        document.getElementById('main-toc-menu').classList.add('fixed', 'top-0', 'left-0');
+        document.getElementById('main-toc-menu').style.width = mainTocMenuWidth + 'px';
+    } else {
+        document.getElementById('main-toc-menu').classList.remove('fixed', 'top-0', 'left-0');
+    }
+});
+
+// Page content
+/*
+    Focus effect on current section anchor when user scrolls.
+*/
+
 tocItems.forEach((el, i) => {
     let id = el.getAttribute("id").substring(5);
     navSections[i] = document.getElementById(id);
@@ -42,7 +62,6 @@ window.addEventListener('scroll', () => {
     }
 }, false);
 
-// If JS enabled, deploy only the current doc menu
 document.addEventListener("DOMContentLoaded", function() {
     var menusTriggers = document.getElementsByClassName("deploySubMenu");
     var activeDocPage = document.getElementsByClassName("activePage")[0];