Reduce cls by toggling padding value on body element

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
         }

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>