Better scroll behaviour for apidocs

config/jsdoc/api/template/static/scripts/main.js

@@ -237,29 +237,6 @@ $(function () {
     search.manualToggle(clsItem, show);
   });
 
-//  Auto resizing on navigation
-  var _onResize = function () {
-    var height_w = $(window).height();
-    var height_s = $('section').height();
-    var $el = $('.navigation');
-    var dif_h = height_w - height_s;
-    if (window.matchMedia("(min-width: 768px)").matches) {
-      if (dif_h >=0){
-         $('.navigation').height(height_s+dif_h+74);
-         $('.navigation-list').height(height_s+dif_h)
-      }
-      else {
-         $('.navigation').height(height_s+74);
-         $('.navigation-list').height(height_s-60);
-      }
-    }
-    else{
-      $('.navigation').height(220);
-      $('.navigation-list').height(140);
-    }
-  }
-  $(window).on('resize', _onResize);
-  _onResize();
 
   var currentVersion = document.getElementById('package-version').innerHTML;
 

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 {