Refactor scrolling

Author: josevalim

Diff for: assets/css/layout.css

@@ -42,6 +42,7 @@ body {
   --sidebarButtonRightOpen: 4px;
   position: fixed;
   z-index: 200;
+  top: 0;
   left: 0;
   transition: all var(--sidebarTransitionDuration) ease-in-out;
   will-change: transform;
@@ -123,19 +124,7 @@ body.sidebar-closed .sidebar-button {
 }
 
 @media screen and (max-width: 768px) {
-  .sidebar-button {
-    top: 0;
-    transition: top .3s;
-    position: absolute;
-  }
-
-  .sidebar-button.fixed {
-    top: 0;
-    transition: top .3s;
-    position: fixed;
-  }
-
-    .content,
+  .content,
   body.sidebar-opening .content {
     left: 0;
     width: 100%;
@@ -145,21 +134,17 @@ body.sidebar-closed .sidebar-button {
     padding-top: 43px;
     padding-bottom: 26px;
     overflow-x: auto;
-    
   }
 
   body.sidebar-closed .sidebar-button {
-    position: fixed;
-    left: 0; 
-    top: 0;
-    transition: top .3s;
     position: absolute;
   }
 
-  body.sidebar-closed .sidebar-button.fixed {
-    position: fixed;
-    left: 0;
-    top: 0; 
-    transition: top .3s;
+  .sm-fixed {
+    position: fixed !important;
   }
-}
+
+  .sm-hidden {
+    top: -70px !important;
+  }
+}

Diff for: assets/css/search-bar.css

@@ -1,5 +1,7 @@
 .top-search {
   margin-top: 10px;
+  height: 70px;
+  background-color: var(--background);
 }
 
 .search-settings {
@@ -120,41 +122,28 @@
 }
 
 @media (max-width: 768px) {
-  
   .top-search {
     margin-top: 0;
     position: absolute;
     top: 13px;
-    left: 56px;
-    right: 20px;
-    z-index: 99;
-  }
-
-  .top-search.fixed {
-    margin-top: 0;
-    position: fixed;
-    top: 13px;
+    height: 57px;
     left: 56px;
     right: 20px;
     transition: top 0.3s;
     z-index: 99;
   }
 
   .background-layer {
-    display: block;
-    z-index: 10;
-    transition: top 0.3s;
-  }
-
-  .background-layer.fixed {
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 70px;
     background-color: var(--background);
+    transition: top 0.3s;
+    z-index: 98;
   }
-  
+
   .search-settings {
     width: 100%;
     box-sizing: border-box;

Diff for: assets/js/search-bar.js

@@ -142,46 +142,39 @@ function isMacOS () {
   return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
 }
 
-window.addEventListener('scroll', function () {
-  const topSearch = document.querySelector('.top-search')
-  const sidebarMenu = document.getElementById('sidebar-menu')
-  const backgroundLayer = document.querySelector('.background-layer')
-  const currentScroll = window.scrollY
-
-  // Add 'fixed' class when not at the top
-  if (currentScroll > 70) {
-    topSearch.classList.add('fixed')
-    sidebarMenu.classList.add('fixed')
-    backgroundLayer.classList.add('fixed')
-  } else {
-    // Remove 'fixed' class when at the top
-    topSearch.classList.remove('fixed')
-    sidebarMenu.classList.remove('fixed')
-    backgroundLayer.classList.remove('fixed')
-  }
-})
-
 let lastScrollTop = window.scrollY
 const topSearch = document.querySelector('.top-search')
 const sidebarMenu = document.getElementById('sidebar-menu')
 const backgroundLayer = document.querySelector('.background-layer')
-const scrollThreshold = 56 // Set a threshold for scroll, adjust as needed
+const scrollThreshold = 70 // Set a threshold for scroll, adjust as needed
 
 window.addEventListener('scroll', function () {
   const currentScroll = window.scrollY
 
+  // Add 'fixed' class when not at the top
+  if (currentScroll > scrollThreshold * 2) {
+    topSearch.classList.add('sm-fixed')
+    sidebarMenu.classList.add('sm-fixed')
+    backgroundLayer.classList.add('sm-fixed')
+  }
+
+  if (currentScroll == 0) {
+    // Remove 'fixed' class when at the top
+    topSearch.classList.remove('sm-fixed')
+    sidebarMenu.classList.remove('sm-fixed')
+    backgroundLayer.classList.remove('sm-fixed')
+  }
+
   if (currentScroll > lastScrollTop && currentScroll > scrollThreshold) {
     // Scrolling down and past the threshold
-    topSearch.style.top = '-50px'
-    backgroundLayer.style.top = '-70px'
-    if (sidebarMenu.getAttribute('aria-expanded') !== 'true') {
-      sidebarMenu.style.top = '-50px'
-    }
+    topSearch.classList.add('sm-hidden')
+    sidebarMenu.classList.add('sm-hidden')
+    backgroundLayer.classList.add('sm-hidden')
   } else {
     // Scrolling up or at the top of the page
-    topSearch.style.top = '11px'
-    backgroundLayer.style.top = '0px'
-    sidebarMenu.style.top = '0px'
+    topSearch.classList.remove('sm-hidden')
+    sidebarMenu.classList.remove('sm-hidden')
+    backgroundLayer.classList.remove('sm-hidden')
   }
 
   lastScrollTop = currentScroll <= 0 ? 0 : currentScroll