Update banner to animate on scroll (istio#9784)

* Update banner to animate on scroll * Correct indentation * Fix linting issue
learner0810 · May 18, 2021 · a7141a0 · a7141a0
1 parent 053e7b9
commit a7141a0
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/src/sass/misc/_banners.scss b/src/sass/misc/_banners.scss
@@ -1,6 +1,12 @@
 .banner-container {
     display: none;
     top: $headerHeight;
+    transition: top .2s;
+
+    &.active {
+        top: $activeHeaderHeight;
+    }
+
     @media screen AND (min-width: $bp-md) {
         display: block;
         position: fixed;

diff --git a/src/ts/events.ts b/src/ts/events.ts
@@ -127,10 +127,33 @@ function handleEvents(): void {
         }
     }
 
+    const banner = getByClass("banner-container");
+    function toggleActiveHeader(): void {
+        const top = window.scrollY;
+
+        if (!banner) {
+            return;
+        }
+
+        if (top >= 10) {
+            banner[0].classList.add("active");
+        } else {
+            banner[0].classList.remove("active");
+        }
+    }
+
     loadRemainingEventImpressions();
     displayEvents("banner");
     displayEvents("sticker");
     saveRemainingEventImpressions();
+
+    if (document.readyState !== "loading") {
+        toggleActiveHeader();
+    }
+
+    listen(window, "scroll", () => {
+        toggleActiveHeader();
+    });
 }
 
 handleEvents();