Make the search bar fixed, hide the logo when scrolling down

This closes #2778.

_static/css/custom.css

@@ -422,6 +422,26 @@ code,
     background-color: var(--navbar-background-color);
 }
 
+@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 {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: -8px;
+        width: 300px;
+        height: 8px;
+        pointer-events: none;
+        background: linear-gradient(hsla(0, 0%, 0%, 0.2), transparent);
+    }
+}
+
 .wy-side-nav-search > a:hover,
 .wy-side-nav-search .wy-dropdown > a:hover {
     background-color: var(--navbar-background-color-hover);
@@ -494,6 +514,14 @@ 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

@@ -0,0 +1,37 @@
+// The number of pixels the user must scroll by before the logo is hidden.
+const scrollTopPixels = 40;
+
+// 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
+// more readable.
+function registerOnScrollEvent(mediaQuery) {
+  // The navigation bar that contains the logo.
+  const $navbar = $('.wy-side-scroll');
+
+  // The anchor that contains the logo. This element will be hidden
+  // (instead of hiding just the logo), otherwise, a small clickable area
+  // would remain visible.
+  const $logo = $('.wy-side-nav-search > a');
+
+  if (mediaQuery.matches) {
+    // We're on desktop; register the scroll event.
+    $navbar.scroll(function() {
+      if ($(this).scrollTop() >= scrollTopPixels) {
+        $logo.hide();
+      } else {
+        $logo.show();
+      }
+    });
+  } else {
+    // We're on mobile; unregister the scroll event so the logo isn't hidden
+    // when scrolling.
+    $logo.show();
+    $navbar.unbind('scroll');
+  }
+}
+
+$(document).ready(() => {
+  const mediaQuery = window.matchMedia('only screen and (min-width: 768px)');
+  registerOnScrollEvent(mediaQuery);
+  mediaQuery.addListener(registerOnScrollEvent);
+});