From 11c0669d8126732992c44c93baa0bf36fa5b0cb2 Mon Sep 17 00:00:00 2001
From: Jan Brasna <1784648+janbrasna@users.noreply.github.com>
Date: Thu, 12 Dec 2024 22:39:44 +0100
Subject: [PATCH] Refresh: Fix nav sticky scrolling styling/condition (#15673)

* Update m24-nav sticky scrolling condition

* Allow for some less precision

* Add shadow transition
---
 media/css/m24/components/navigation-refresh.scss | 2 +-
 media/js/base/protocol/m24-navigation.es6.js     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/media/css/m24/components/navigation-refresh.scss b/media/css/m24/components/navigation-refresh.scss
index 3c46292ab4f..351d26f112a 100644
--- a/media/css/m24/components/navigation-refresh.scss
+++ b/media/css/m24/components/navigation-refresh.scss
@@ -46,7 +46,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
             z-index: 1000;
             left: 0;
             top: 0;
-            @include transition(transform 300ms ease-in-out);
+            @include transition(transform 300ms ease-in-out, box-shadow 300ms ease-in-out);
 
             &.mzp-is-scrolling {
                 // Shadow colors are equivalent to $color-ink-90, $color-blue-90, $color-ink-90
diff --git a/media/js/base/protocol/m24-navigation.es6.js b/media/js/base/protocol/m24-navigation.es6.js
index e27464e14e0..589125c704f 100644
--- a/media/js/base/protocol/m24-navigation.es6.js
+++ b/media/js/base/protocol/m24-navigation.es6.js
@@ -122,8 +122,8 @@ MzpNavigation.initSticky = () => {
  * user scrolls up and down the viewport.
  */
 MzpNavigation.checkScrollPosition = () => {
-    // add styling for when scrolling the viewport
-    if (window.scrollY > 0) {
+    // add styling for when scrolling the viewport and nav is already sticking
+    if (window.scrollY > 0 && _navElem.getBoundingClientRect().top < 1) {
         _navElem.classList.add('mzp-is-scrolling');
     } else {
         _navElem.classList.remove('mzp-is-scrolling');