diff --git a/src/components.d.ts b/src/components.d.ts
index 668ae9da32cd87c760bd51cfd83d49a86f0462a2..ed8f66b6f7890ff5f0694b637d89b0f37c24afa0 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -2039,6 +2039,7 @@ declare namespace LocalJSX {
     menuLabelClose?: string;
     menuLabelOpen?: string;
     menuType?: MenuType;
+    onHeaderScrollUp?: (event: CustomEvent<any>) => void;
   }
   interface HySiteLogo {
     color?: ColorVariant;
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index 3b0dcc67385f0ac6e49245804a4fbb15e5e97c62..35bd9d81615a0b919596bbf2c0cef6edfc857c06 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -231,6 +231,13 @@ export class HyDesktopMenuLinks {
     this.closePanel(fadeOut);
   }
 
+  // CLose the desktop menu panel if user scrolls Sticky Header till the very top.
+  @Listen('headerScrollUp', {target: 'document'})
+  headerScrollUp() {
+    let fadeOut = false;
+    this.closePanel(fadeOut);
+  }
+
   handleDesktopMenuEnter(event, id) {
     clearTimeout(this._fadeOutTimer);
 
diff --git a/src/components/site-header/readme.md b/src/components/site-header/readme.md
index 3436d38d4374540bb1aa4295fb77fd3e733b0e2c..b1e105e5db393afca0118d046713ce057b6b2504 100644
--- a/src/components/site-header/readme.md
+++ b/src/components/site-header/readme.md
@@ -17,6 +17,12 @@
 | `menuLabelOpen`        | `menu-label-open`         |             | `string`                                                                                           | `undefined`        |
 | `menuType`             | `menu-type`               |             | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.sidepanel \| MenuType.tablet` | `MenuType.default` |
 
+## Events
+
+| Event            | Description | Type               |
+| ---------------- | ----------- | ------------------ |
+| `headerScrollUp` |             | `CustomEvent<any>` |
+
 ## Dependencies
 
 ### Depends on
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index d6dec40165ac7f86f582216791674c1586c41b4a..3cb0d93b536d177b7beb2f588cda05fb24f2ac53 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -14,7 +14,7 @@ export interface ComponentLabels {
   label?: string;
 }
 
-import {Component, Element, h, Listen, Prop, State} from '@stencil/core';
+import {Component, Element, Event, EventEmitter, h, Listen, Prop, State} from '@stencil/core';
 import ResizeObserver from 'resize-observer-polyfill';
 import {MenuType, ColorVariant, SiteLogoSize} from '../../utils/utils';
 
@@ -41,6 +41,8 @@ export class SiteHeader {
   @State() isMobile: boolean;
   @State() isMenuOpen: boolean = false;
   @State() isDesktopMenuOpen: boolean = false;
+
+  @Event() headerScrollUp: EventEmitter;
   private ro: ResizeObserver;
   private donateLink: DonateLink[];
   private menuLabels: ComponentLabels[];
@@ -131,7 +133,6 @@ export class SiteHeader {
     // If current position > last position AND scrolled past navbar...
     if (st > this.lastScrollTop && st > this.navbarHeight) {
       // 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');
@@ -141,10 +142,13 @@ export class SiteHeader {
         hySiteHeader.classList.remove('hy-site-header--sticky-active');
         hySiteHeader.classList.remove('hy-site-header--sticky-visible');
         hySiteHeader.classList.remove('hy-site-header--sticky-hidden');
+
+        // Close desktop menu panel if it's open.
+        this.headerScrollUp.emit();
       } 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');
+        hySiteHeader.classList.add('hy-site-header--sticky-visible');
       }
     }
     this.lastScrollTop = st;