most things work, scrollspy looks pretty

2 files changed, 67 insertions, 0 deletions

diff --git a/book/src/main/resources/css/layouts/side-menu.css b/book/src/main/resources/css/layouts/side-menu.css
index aba4441..08c2443 100755
--- a/book/src/main/resources/css/layouts/side-menu.css
+++ b/book/src/main/resources/css/layouts/side-menu.css
@@ -2,6 +2,13 @@ body {
     color: #777;
 }
 
+#main{
+    position: fixed;
+
+    right: 0px;
+    height: 100%;
+    overflow-y: scroll
+}
 .pure-img-responsive {
     max-width: 100%;
     height: auto;
@@ -92,6 +99,7 @@ appears on the left side of the page.
     z-index: 1000; /* so the menu or its navicon stays above all content */
     background: #191818;
     overflow-y: auto;
+    overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
 }
     /*
@@ -222,6 +230,9 @@ Hides the menu at `48em`, but modify this based on your app's needs.
         padding-left: 250px; /* left col width "#menu" */
         left: 0;
     }
+    #main{
+        left: 250px;
+    }
     #menu {
         left: 250px;
     }
diff --git a/book/src/main/resources/js/ui.js b/book/src/main/resources/js/ui.js
index eed641b..8ac4e3a 100755
--- a/book/src/main/resources/js/ui.js
+++ b/book/src/main/resources/js/ui.js
@@ -40,4 +40,60 @@ document.addEventListener("DOMContentLoaded", function(){
         hljs.highlightBlock(snippets[i])
     }
 
+
+
+
+    // Cache selectors
+    var lastId = -1;
+    var main = document.getElementById("main");
+
+    scrollItems = document.getElementsByClassName("menu-item");
+
+    scrollHeaders = []
+
+    for(var i = 0; i < scrollItems.length; i++){
+        scrollHeaders.push(
+            document.getElementById(
+                scrollItems[i].getAttribute("href").substring(1)
+            )
+        )
+    }
+
+
+    function isElementInViewport (el) {
+        var rect = el.getBoundingClientRect();
+
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
+        );
+    }
+    main.addEventListener("scroll", function(){
+        // Get container scroll position
+        var fromTop = main.scrollTop;
+
+        // Get id of current scroll item
+        for(var i = scrollItems.length - 1; i >= 0; i--){
+            console.log(scrollHeaders[i].offsetTop, fromTop)
+            if (scrollHeaders[i].offsetTop < fromTop + 15 /*fudge factor*/){
+                if (lastId != i) {
+                    if (lastId != -1) {
+                        scrollItems[lastId].parentElement.className = scrollItems[lastId].parentElement.className.replace(
+                            " pure-menu-selected",
+                            ""
+                        );
+                    }
+                    scrollItems[i].parentElement.className = scrollItems[i].parentElement.className + " pure-menu-selected"
+                    if (!isElementInViewport(scrollItems[i].parentElement)){
+                        scrollItems[i].parentElement.scrollIntoView(lastId > i)
+                    }
+
+                    lastId = i
+                }
+                break;
+            }
+        }
+    });
 });