fixed header while scrolling up

src/components/navigation/menu-language/menu-language.tsx

@@ -32,14 +32,6 @@ export class MenuLanguage {
     this._labels = typeof data === 'string' ? JSON.parse(data) : data;
   }
 
-  @Listen('languageMenuLeave') languageMenuLeave() {
-    this.isMenuOpen = false;
-  }
-
-  @Listen('languageMenuToggle') languageMenuToggle() {
-    //this.isMenuOpen = !this.isMenuOpen;
-  }
-
   @Listen('click')
   handleComponentClick(event) {
     this.isMenuOpen = !this.isMenuOpen;
@@ -89,16 +81,12 @@ export class MenuLanguage {
       </Host>
     ) : (
       <Host
-        //onMouseLeave={() => this.languageMenuLeave()}
         class={{
           'menu--language': true,
           'menu--language__is-open': this.isMenuOpen,
         }}
       >
         <button
-          //onClick={() => this.languageMenuToggle()}
-          //onMouseOver={() => this.languageMenuToggle()}
-          //onFocus={() => this.languageMenuToggle()}
           class={{
             'menu--language__toggle': true,
             'is-open': this.isMenuOpen,

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss

@@ -117,6 +117,10 @@
         right: 0;
         width: 100%;
       }
+
+      &:focus {
+        outline: none;
+      }
     }
 
     // Panel with second level menu items and shortcuts.

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx

@@ -67,6 +67,10 @@ export class HyDesktopMenuLinks {
   }
 
   showPanel(id) {
+    // Close menu lang menu if it's open
+    //this.closeLangMenu();
+
+    // Open desktop menu panel
     this.isDesktopMenuOpen = true;
 
     const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
@@ -102,9 +106,10 @@ export class HyDesktopMenuLinks {
     }
 
     // Add panels top value automatically with the correct header height
-    const headerHeight = `${
-      this.el.parentElement.offsetTop + this.el.parentElement.offsetHeight + this._headerBorderOffset
-    }px`;
+    const headerHeight = this.el.parentElement.classList.contains('hy-site-header--sticky-active')
+      ? `${this.el.parentElement.offsetHeight + this._headerBorderOffset}px`
+      : `${this.el.parentElement.offsetTop + this.el.parentElement.offsetHeight + this._headerBorderOffset}px`;
+    console.log(this.el.parentElement.offsetTop + ' ' + this.el.parentElement.offsetHeight);
     activeMenuItemSibling.style.top = headerHeight;
 
     // Add shadow backdrop

src/components/site-header/site-header.scss

@@ -11,6 +11,23 @@
   place-content: center space-between;
   z-index: 99;
 
+  &--sticky-active {
+    transition: transform 200ms linear;
+    transform: translateY(-100%);
+    transition-duration: 0.2s;
+    transition-property: transform;
+    will-change: transform;
+  }
+  &--sticky-visible {
+    left: 0;
+    position: fixed;
+    transform: translateY(0) translateZ(0);
+    width: 100%;
+  }
+  &--sticky-hidden {
+    top: 0;
+  }
+
   @include breakpoint($narrow) {
     align-content: center;
     display: flex;

src/components/site-header/site-header.tsx

@@ -46,11 +46,24 @@ export class SiteHeader {
   private searchLabels: ComponentLabels[];
   private languageLabels: ComponentLabels[];
 
+  @State() lastScrollTop = 0;
+  @State() delta = 5;
+  @State() navbarHeight = 0;
+  @State() didScroll = false;
+  @State() intervalId;
+
   // Listener for toggling mobile menu panel on or off.
   @Listen('mobileMenuToggle') mobileMenuToggle() {
     this.isMenuOpen = !this.isMenuOpen;
   }
 
+  @Listen('scroll', {target: 'window'})
+  handleScroll() {
+    if (this.el.getAttribute('menu-type') === 'desktop') {
+      this.didScroll = true;
+    }
+  }
+
   componentDidLoad() {
     // Set the browser resize observer to gather information about browser width.
     this.ro = new ResizeObserver((entries) => {
@@ -62,6 +75,8 @@ export class SiteHeader {
 
     // Pass the dataMenuLanguage prop to menu component.
     this.el.children[0].setAttribute('data-menu-language', this.dataMenuLanguage);
+
+    this.navbarHeight = this.el.getClientRects()[0].height;
   }
 
   componentWillLoad() {
@@ -92,6 +107,50 @@ export class SiteHeader {
     this.el.children[0].setAttribute('menu-language-label-open', this.languageLabels['open']);
     this.el.children[0].setAttribute('menu-language-label-close', this.languageLabels['close']);
     this.el.children[0].setAttribute('label-front-page', this.menuLabels['front_page']);
+
+    //this.intervalId = setInterval(this.timer, 250);
+    //clearInterval(this.intervalId);
+    this.intervalId = setInterval(() => {
+      this.timer();
+    }, 250);
+    //console.log('willUpdate ' + this.intervalId);
+  }
+
+  timer() {
+    if (this.didScroll) {
+      this.hasScrolled();
+      this.didScroll = false;
+    }
+  }
+
+  hasScrolled() {
+    let st = window.pageYOffset;
+    if (Math.abs(this.lastScrollTop - st) <= this.delta) {
+      return;
+    }
+
+    let hySiteHeader = this.el.shadowRoot.querySelector('.hy-site-header') as HTMLElement;
+    // If current position > last position AND scrolled past navbar...
+    if (st > this.lastScrollTop && st > this.navbarHeight) {
+      // Scroll Down
+      console.log('scroll down');
+
+      hySiteHeader.classList.add('hy-site-header--sticky-active');
+      hySiteHeader.classList.add('hy-site-header--sticky-hidden');
+      hySiteHeader.classList.remove('hy-site-header--sticky-visible');
+    } else {
+      // Scroll Up
+      if (st < this.el.offsetTop + this.navbarHeight) {
+        hySiteHeader.classList.remove('hy-site-header--sticky-active');
+        hySiteHeader.classList.remove('hy-site-header--sticky-visible');
+        hySiteHeader.classList.remove('hy-site-header--sticky-hidden');
+      } else {
+        hySiteHeader.classList.add('hy-site-header--sticky-active');
+        hySiteHeader.classList.add('hy-site-header--sticky-visible');
+        hySiteHeader.classList.remove('hy-site-header--sticky-hidden');
+      }
+    }
+    this.lastScrollTop = st;
   }
 
   componentDidUnload() {