add sidenav scrollspy

layouts/_default/list.html

@@ -64,17 +64,18 @@
 
                   {{ with .Params.Location }}
                     <div class="p-h-sm p-v-xs"><i class="material-icons">location_on</i> {{ . }}</div>
-                  {{end}}
+                    {{end}}
 
                 </div>
               </div>
           </div>
-        {{ end }}
-      </div>
+          {{ end }}
+        </div>
         {{ template "_internal/pagination.html" . }}
         {{ partial "breadcrumbs.html" . }}
       </article>
-      <aside class="col-sm-3 col-xs-12 unstyled">
+      <div class="offset-watch invisible"></div>
+      <aside class="col-sm-3 col-xs-12 unstyled toc-container">
         <h4 class="m-b-0">On this page</h4>
         {{ .TableOfContents }}
       </aside>

layouts/_default/single.html

@@ -36,7 +36,8 @@
       </div>
         {{ partial "breadcrumbs.html" . }}
       </article>
-      <aside class="col-sm-3 col-xs-12 unstyled">
+      <div class="offset-watch invisible"></div>
+      <aside class="col-sm-3 col-xs-12 unstyled toc-container">
         <h4 class="m-b-0">On this page</h4>
         {{ .TableOfContents }}
       </aside>

src/js/app.js

@@ -209,6 +209,53 @@ const bootstrapNav = function () {
   $('.tree-nav').removeClass('invisible');
 }
 
+const bootstrapScrollSpy = function () {
+
+  $(window).scroll(scrollHandler)
+
+  function scrollHandler() {
+    let $class             = 'sticky';
+    let $el                = $('.toc-container');
+    let $watch             = $('.offset-watch');
+    let scrollTop          = $(window).scrollTop();
+    let elementOffset      = $watch.offset().top;
+    let distance           = (elementOffset - scrollTop);
+    let mainContentHeaders = $('.main-content').find(':header:visible');
+    let opts               = {
+      height: $el.outerHeight(),
+      width:  $el.outerWidth(),
+      left:   $el.offset().left,
+    };
+
+    console.log(scrollTop, $(window).height())
+    for (var i = 0; i <= mainContentHeaders.length - 1; i++) {
+      var $mainContentHeadersEl = $(`#${mainContentHeaders[i].id}`);
+      var hTop = $mainContentHeadersEl.offset().top;
+
+      if (hTop - scrollTop >= 0) {
+        mainContentHeaders.each( ( i, a ) => {
+          $('#TableOfContents').find(`a[href$=${a.id}]`).removeClass('active');
+        });
+        $('#TableOfContents').find(`a[href$=${mainContentHeaders[i].id}]`).addClass('active');
+        break;
+      }
+    }
+
+
+    if (distance <= 0) {
+
+      $el.css(opts);
+      $el.addClass($class)
+
+    } else if (distance >= 0){
+
+      $el.removeClass($class)
+
+    }
+
+  }
+  scrollHandler();
+}
 
 $(document).ready(() => {
   bootstrapNav();
@@ -216,4 +263,5 @@ $(document).ready(() => {
   bootstrapModals();
   bootstrapSorts();
   bootstrapSlider();
+  bootstrapScrollSpy();
 });

src/sass/app.scss

@@ -59,3 +59,14 @@
   visibility: hidden;
   display: none;
 }
+
+.sticky {
+  position: fixed;
+  top: 0;
+}
+
+#TableOfContents {
+  .active {
+    background-color: $accent-two;
+  }
+}