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');