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,23 +61,35 @@ ol {
 li {
   list-style-type: none;
 }
-::-webkit-scrollbar {
+#wrap {
-  width: 8px;
+  display: flex;
-  background-color: transparent;
+  flex-flow: row;
-}
-::-webkit-scrollbar-thumb {
-  background-color: transparent;
-  border-radius: 4px;
 }
 .navigation {
   background-color: #2a2a2a;
-}
+  position: sticky;
-@media (max-width:768px) {
+  top: 54px;
-  .navigation {
+  height: calc(100vh - 54px);
-      max-height:220px;
 }
 .navigation-list {
-      height:140px;
+  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 {
+    height: inherit;
+    position: inherit;
+  }
+  .navigation-list {
+    max-height: 33vh;
+    height: inherit;
   }
 }
 
@@ -107,10 +119,8 @@ li {
   color: #fff;
   border-color: #555;
 }
-.navigation .navigation-list {
+.navigation .navigation-list-wrapper {
-  padding: 10px 15px 0 15px;
+  padding: 10px 0 15px 0;
-  position: relative;
-  overflow: auto;
   width: 100%;
 }
 .navigation li.item {

config/jsdoc/api/template/tmpl/navigation.tmpl

@@ -51,9 +51,12 @@ function listContent(item, title, listItemPrinter) {
 }
 ?>
 <div class="navigation col-md-4 col-lg-3">
+    <div class="search-wrapper">
         <div class="search">
             <input id="search" type="text" autocomplete="off" class="form-control input-sm" placeholder="Search Documentation">
         </div>
+    </div>
+    <div class="navigation-list-wrapper">
         <ul class="navigation-list search-empty"><?js
             this.nav.forEach(function (item) { ?>
             <li class="item item-<?js= item.type ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
@@ -68,3 +71,4 @@ function listContent(item, title, listItemPrinter) {
             }); ?>
         </ul>
     </div>
+</div>

examples/index.html

@@ -28,29 +28,6 @@
       .example:hover {
         background-color: #F5F5F5;
       }
-
-      ::-webkit-scrollbar {
-        width: 8px;
-      }
-
-      ::-webkit-scrollbar-button {
-        width: 0;
-        height: 0;
-        display: none;
-      }
-
-      ::-webkit-scrollbar-thumb {
-        background-color: rgba(0, 0, 0, 0.2);
-        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10),inset 0 -1px 0 rgba(0, 0, 0, 0.07);
-      }
-
-      ::-webkit-scrollbar-thumb:hover {
-        background-color: rgba(0, 0, 0, 0.4);
-      }
-
-      ::-webkit-scrollbar-corner {
-        background-color: transparent;
-      }
     </style>
     <script type="text/javascript" src="Jugl.js"></script>
     <script type="text/javascript" src="examples-info.js"></script>