Prevent auto-hide when mega menu is open

Shopify · Mar 31, 2022 · 775c7c0 · 775c7c0
1 parent 2cf7a95
commit 775c7c0
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
@@ -8,7 +8,6 @@
   border-radius: 0;
   border-right: 0;  
   left: 0;
-  max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem);
   overflow-y: auto;
   padding-bottom: 2.4rem;
   padding-top: 2.4rem;
@@ -18,6 +17,10 @@
   z-index: -1;
 }
 
+.shopify-section-header-sticky .mega-menu__content {
+  max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem);
+}
+
 .header-wrapper--border-bottom .mega-menu__content {
   border-top: 0;
 }

diff --git a/assets/details-disclosure.js b/assets/details-disclosure.js
@@ -35,14 +35,15 @@ customElements.define('details-disclosure', DetailsDisclosure);
 class HeaderMenu extends DetailsDisclosure {
   constructor() {
     super();
-    this.header = document.querySelector('header');
+    this.header = document.querySelector('.header-wrapper');
   }
 
   onToggle() {
-    document.body.classList.toggle('overflow-hidden', this.querySelectorAll('.mega-menu[open]').length);
+    if (!this.header) return;
+    this.header.preventHide = !!this.querySelectorAll('.mega-menu[open]').length;
 
     if (document.documentElement.style.getPropertyValue('--header-bottom-position-desktop') !== '') return;
-    if (this.header) document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(this.header.getBoundingClientRect().bottom)}px`);
+    document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(this.header.getBoundingClientRect().bottom)}px`);    
   }
 }
 

diff --git a/sections/header.liquid b/sections/header.liquid
@@ -618,6 +618,7 @@
       if (this.predictiveSearch && this.predictiveSearch.isOpen) return;
 
       if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
+        if (this.preventHide) return;
         requestAnimationFrame(this.hide.bind(this));
       } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
         if (!this.preventReveal) {
@@ -635,7 +636,6 @@
         requestAnimationFrame(this.reset.bind(this));
       }
 
-
       this.currentScrollTop = scrollTop;
     }