diff --git a/src/sass/misc/_banners.scss b/src/sass/misc/_banners.scss
index 690b02d882..224cb4dddf 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 81b8bd30b9..851162e2c9 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();