ui: improve menu folding

Fold/unfold the menu bar just by the amount of scroll, not by its full width
rust-lang · Jul 20, 2019 · fe815a0 · fe815a0
1 parent f396623
commit fe815a0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 20 deletions.
diff --git a/src/theme/book.js b/src/theme/book.js
@@ -596,25 +596,29 @@ function playpen_text(playpen) {
 })();
 
 (function autoHideMenu() {
-    var menu = document.getElementById('menu-bar');
-
+    var menuStickyContainer = document.getElementById('menu-bar-sticky-container');
     var previousScrollTop = document.scrollingElement.scrollTop;
-
+    menuStickyContainer.style.top = '0px';
     document.addEventListener('scroll', function () {
-        if (menu.classList.contains('folded') && document.scrollingElement.scrollTop < previousScrollTop) {
-            menu.classList.remove('folded');
-        } else if (!menu.classList.contains('folded') && document.scrollingElement.scrollTop > previousScrollTop) {
-            menu.classList.add('folded');
-        }
-
-        if (!menu.classList.contains('bordered') && document.scrollingElement.scrollTop > 0) {
-            menu.classList.add('bordered');
+        var scrollAmount = document.scrollingElement.scrollTop - previousScrollTop;
+        previousScrollTop = document.scrollingElement.scrollTop;
+        var newTopPx = parseInt(menuStickyContainer.style.top.slice(0, -2)) - scrollAmount;
+        if (newTopPx < -menuStickyContainer.clientHeight) {
+            newTopPx = -menuStickyContainer.clientHeight;
+        } else if (newTopPx > 0) {
+            newTopPx = 0;
         }
+        menuStickyContainer.style.top = newTopPx + 'px';
+    }, { passive: true });
+})();
 
-        if (menu.classList.contains('bordered') && document.scrollingElement.scrollTop === 0) {
+(function controllMenuBorder() {
+    var menu = document.getElementById('menu-bar');
+    document.addEventListener('scroll', function () {
+        if (document.scrollingElement.scrollTop === 0) {
             menu.classList.remove('bordered');
+        } else {
+            menu.classList.add('bordered');
         }
-
-        previousScrollTop = document.scrollingElement.scrollTop;
     }, { passive: true });
 })();
diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css
@@ -26,15 +26,18 @@ a > .hljs {
     margin: auto calc(0px - var(--page-padding));
 }
 #menu-bar > #menu-bar-sticky-container {
+    position: relative;
     display: flex;
     flex-wrap: wrap;
     background-color: var(--bg);
     border-bottom-color: var(--bg);
     border-bottom-width: 1px;
     border-bottom-style: solid;
 }
-.js #menu-bar > #menu-bar-sticky-container {
-    transition: transform 0.3s;
+.js #menu-bar:hover > #menu-bar-sticky-container,
+html.sidebar-visible.js #menu-bar-sticky-container {
+    top: 0 !important;
+    transition: top 0.2s;
 }
 #menu-bar.bordered > #menu-bar-sticky-container  {
     border-bottom-color: var(--table-border-color);
@@ -70,10 +73,6 @@ a > .hljs {
     text-decoration: none;
 }
 
-html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container {
-    transform: translateY(-60px);
-}
-
 .left-buttons {
     display: flex;
     margin: 0 5px;