Enhance Scroll Interaction with Threshold-Based Visibility for Navigation Elements (#1841)

Author: paulo-valim

Diff for: assets/css/layout.css

@@ -123,6 +123,18 @@ 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,
   body.sidebar-opening .content {
     left: 0;
@@ -137,8 +149,17 @@ body.sidebar-closed .sidebar-button {
   }
 
   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;
-    transition: top 0.9s;  
+    top: 0; 
+    transition: top .3s;
   }
 }

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

@@ -1,13 +1,3 @@
-.background-layer {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 70px;
-  background-color: var(--background);
-}
-
 .top-search {
   margin-top: 10px;
 }
@@ -130,13 +120,17 @@
 }
 
 @media (max-width: 768px) {
-  .background-layer {
-    display: block;
-    z-index: 10;
-    transition: top 0.3s;
+  
+  .top-search {
+    margin-top: 0;
+    position: absolute;
+    top: 13px;
+    left: 56px;
+    right: 20px;
+    z-index: 99;
   }
 
-  .top-search {
+  .top-search.fixed {
     margin-top: 0;
     position: fixed;
     top: 13px;
@@ -146,6 +140,21 @@
     z-index: 99;
   }
 
+  .background-layer {
+    display: block;
+    z-index: 10;
+    transition: top 0.3s;
+  }
+
+  .background-layer.fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 70px;
+    background-color: var(--background);
+  }
+  
   .search-settings {
     width: 100%;
     box-sizing: border-box;

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

@@ -142,27 +142,46 @@ 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
 
 window.addEventListener('scroll', function () {
   const currentScroll = window.scrollY
 
-  if (currentScroll > lastScrollTop) {
-    // Scrolling down
+  if (currentScroll > lastScrollTop && currentScroll > scrollThreshold) {
+    // Scrolling down and past the threshold
     topSearch.style.top = '-50px'
     backgroundLayer.style.top = '-70px'
-    // Only hide sidebarMenu if aria-expanded is not true
     if (sidebarMenu.getAttribute('aria-expanded') !== 'true') {
-      sidebarMenu.style.display = 'none'
+      sidebarMenu.style.top = '-50px'
     }
   } else {
-    // Scrolling up
+    // Scrolling up or at the top of the page
     topSearch.style.top = '11px'
     backgroundLayer.style.top = '0px'
-    sidebarMenu.style.display = 'block'
+    sidebarMenu.style.top = '0px'
   }
 
   lastScrollTop = currentScroll <= 0 ? 0 : currentScroll