Fix search bar shadow when it's not fixed due to scrolling yet

This closes #3113.

_static/css/custom.css

@@ -422,10 +422,14 @@ code,
     background-color: var(--navbar-background-color);
 }
 
+.wy-side-nav-search.fixed {
+    position: fixed;
+}
+
 @media only screen and (min-width: 768px) {
     /* 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 {
+    .wy-side-nav-search.fixed::after {
         content: '';
         position: absolute;
         left: 0;

_static/js/custom.js

@@ -25,11 +25,11 @@ function registerOnScrollEvent(mediaQuery) {
     $navbar.scroll(function() {
       if ($(this).scrollTop() >= scrollTopPixels) {
         $logo.hide();
-        $search.css('position', 'fixed');
+        $search.addClass('fixed');
         $menu.css('margin-top', menuTopMargin);
       } else {
         $logo.show();
-        $search.css('position', 'static');
+        $search.removeClass('fixed');
         $menu.css('margin-top', 0);
       }
     });