Better scroll behaviour for apidocs

config/jsdoc/api/template/static/styles/jaguar.css

@@ -18,7 +18,7 @@
 }
 
 body {
-  padding-top: 55px;
+  padding-top: 54px;
 }
 .nameContainer .anchor {
   padding-top: 70px;
@@ -61,24 +61,36 @@ ol {
 li {
   list-style-type: none;
 }
-::-webkit-scrollbar {
-  width: 8px;
-  background-color: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background-color: transparent;
-  border-radius: 4px;
+#wrap {
+  display: flex;
+  flex-flow: row;
 }
 .navigation {
   background-color: #2a2a2a;
+  position: sticky;
+  top: 54px;
+  height: calc(100vh - 54px);
 }
-@media (max-width:768px) {
+.navigation-list {
+  overflow: auto;
+  padding: 0 15px 0 15px;
+  /* 54px navbar height */
+  /* 4.25rem + 2px  searchbox height */
+  /* 25px navigation padding */
+  height: calc(100vh - 54px - 4.25rem - 2px - 25px);
+}
+@media (max-width: 768px) {
+  #wrap {
+    flex-flow: column;
+  }
   .navigation {
-      max-height:220px;
-    }
-    .navigation-list{
-      height:140px;
-    }
+    height: inherit;
+    position: inherit;
+  }
+  .navigation-list {
+    max-height: 33vh;
+    height: inherit;
+  }
 }
 
 .navigation .applicationName {
@@ -107,10 +119,8 @@ li {
   color: #fff;
   border-color: #555;
 }
-.navigation .navigation-list {
-  padding: 10px 15px 0 15px;
-  position: relative;
-  overflow: auto;
+.navigation .navigation-list-wrapper {
+  padding: 10px 0 15px 0;
   width: 100%;
 }
 .navigation li.item {