Merge pull request #3100 from Calinou/improve-fixed-search-bar

Improve the fixed search bar

_static/css/custom.css

@@ -423,11 +423,6 @@ code,
 }
 
 @media only screen and (min-width: 768px) {
-    .wy-side-nav-search {
-        /* Keep the search field visible when scrolling down */
-        position: fixed;
-    }
-
     /* Simulate a drop shadow that only affects the bottom edge */
     /* This is used to indicate the search bar is fixed */
     .wy-side-nav-search::after {
@@ -514,14 +509,6 @@ code,
     width: 308px;
 }
 
-@media only screen and (min-width: 768px) {
-    .wy-menu-vertical {
-        /* Account for the fixed logo and search form */
-        /* (prevents the navbar from being hidden behind it) */
-        margin-top: 330px;
-    }
-}
-
 .wy-menu-vertical a {
     color: var(--navbar-level-1-color);
 }

_static/js/custom.js

@@ -1,5 +1,10 @@
 // The number of pixels the user must scroll by before the logo is hidden.
-const scrollTopPixels = 40;
+const scrollTopPixels = 234;
+
+// The margin to apply to the menu when the search bar is made fixed.
+// Should roughly match the logo's height as to not hide the top menu items
+// behind it.
+const menuTopMargin = '330px';
 
 // Hide the navigation bar logo when scrolling down on desktop platforms.
 // The logo is quite tall, so this helps make the rest of the navigation bar
@@ -7,6 +12,8 @@ const scrollTopPixels = 40;
 function registerOnScrollEvent(mediaQuery) {
   // The navigation bar that contains the logo.
   const $navbar = $('.wy-side-scroll');
+  const $menu = $('.wy-menu-vertical');
+  const $search = $('.wy-side-nav-search');
 
   // The anchor that contains the logo. This element will be hidden
   // (instead of hiding just the logo), otherwise, a small clickable area
@@ -18,8 +25,12 @@ function registerOnScrollEvent(mediaQuery) {
     $navbar.scroll(function() {
       if ($(this).scrollTop() >= scrollTopPixels) {
         $logo.hide();
+        $search.css('position', 'fixed');
+        $menu.css('margin-top', menuTopMargin);
       } else {
         $logo.show();
+        $search.css('position', 'static');
+        $menu.css('margin-top', 0);
       }
     });
   } else {