Update banner to animate on scroll (#9784)

* Update banner to animate on scroll

* Correct indentation

* Fix linting issue

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;

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