make the left side menu sticky on scroll

brigadecore · Mar 5, 2019 · d229b2c · d229b2c
1 parent 67040bb
commit d229b2c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 1 deletion.
diff --git a/docs/themes/techdoc-brigade/layouts/partials/footer.html b/docs/themes/techdoc-brigade/layouts/partials/footer.html
@@ -9,3 +9,16 @@
 <i class="fas fa-circle"></i>
 <i class="fas fa-arrow-circle-up"></i>
 </span></a>
+
+<script type="text/javascript">
+  // make the sidebar sticky on scroll
+  var affixMenu = document.querySelector(".sidebar");
+
+  window.onscroll = function() {
+    if (window.pageYOffset > 140) {
+      affixMenu.classList.add("fixed");
+    } else {
+      affixMenu.classList.remove("fixed");
+    };
+  }
+</script>
diff --git a/docs/themes/techdoc-brigade/static/css/theme.css b/docs/themes/techdoc-brigade/static/css/theme.css
@@ -1021,6 +1021,20 @@ header nav ul li a {
   color: #647b83;
 }
 
+.sidebar.fixed nav {
+  position: fixed;
+  max-width: 300px;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 1500;
+  overflow-y: scroll;
+}
+
+.sidebar.fixed nav ul {
+  padding-bottom: 0.667rem;
+}
+
 main {
   padding-bottom: 0;
 }