From a7141a0c47a601baa38eca161f84cd4e9af0982d Mon Sep 17 00:00:00 2001
From: Ryota <rytswd@gmail.com>
Date: Tue, 18 May 2021 21:57:37 +0100
Subject: [PATCH] Update banner to animate on scroll (#9784)

* Update banner to animate on scroll

* Correct indentation

* Fix linting issue
---
 src/sass/misc/_banners.scss |  6 ++++++
 src/ts/events.ts            | 23 +++++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/src/sass/misc/_banners.scss b/src/sass/misc/_banners.scss
index 690b02d882001..224cb4dddf37a 100644
--- 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
index 81b8bd30b9697..851162e2c9259 100644
--- 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();