Refresh: Fix nav sticky scrolling styling/condition (#15673)

* Update m24-nav sticky scrolling condition * Allow for some less precision * Add shadow transition
mozilla · Dec 12, 2024 · 11c0669 · 11c0669
1 parent d667a96
commit 11c0669
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git 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
@@ -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');