From cd895c060dbf4264c9e6640c06adde2044b1bcb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Mon, 14 Mar 2022 13:45:52 +0100
Subject: [PATCH] Reduce cls by toggling padding value on body element

---
 .../Private/Assets/js/controllers/sticky_controller.js | 10 +++++++++-
 .../Resources/Private/Templates/Searchbar/Index.html   |  1 +
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/sticky_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/sticky_controller.js
index 9dc41003..90a043bc 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/sticky_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/sticky_controller.js
@@ -9,6 +9,7 @@ export default class extends Controller {
         sticky: Boolean,
         classes: String,
         offset: Number,
+        padding: String,
         disabled: Boolean,
     }
 
@@ -35,7 +36,14 @@ export default class extends Controller {
         this.stickyValue = window.scrollY > this.offsetValue
     }
 
-    stickyValueChanged() {
+    stickyValueChanged(value) {
+        if (this.hasPaddingValue) {
+            if (true === value) {
+                document.body.style.paddingTop = this.paddingValue
+            } else {
+                document.body.removeAttribute('style')
+            }
+        }
         if (!this.hasClassesValue) {
             return
         }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
index e04aa5af..cb34bb7f 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
@@ -23,6 +23,7 @@
                     <f:else>
                         data-controller="sticky"
                         data-sticky-offset-value="650"
+                        data-sticky-padding-value="7.5rem"
                         data-sticky-disabled-value="false"
                         data-sticky-classes-value="sticky reduced"
                     </f:else>