From 6e9fbef3c0c3a261df81d9fbffb5f0d91da09a27 Mon Sep 17 00:00:00 2001
From: tblivet <thibault.blivet@prestashop.com>
Date: Mon, 17 Jun 2024 14:13:51 +0200
Subject: [PATCH] feat: handle scroll offset

---
 src/js/constants/selectors-map.ts         |  5 +++++
 src/js/helpers/scrollPadding.ts           | 22 ++++++++++++++++++++++
 src/js/theme.ts                           |  2 ++
 templates/layouts/layout-both-columns.tpl |  2 +-
 4 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/js/helpers/scrollPadding.ts

diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts
index 4561e2217..1c4fb7253 100644
--- a/src/js/constants/selectors-map.ts
+++ b/src/js/constants/selectors-map.ts
@@ -3,6 +3,10 @@
  * file that was distributed with this source code.
  */
 
+export const layout = {
+  stickyHeader: '.js-sticky-header',
+};
+
 export const facetedsearch = {
   range: '.js-faceted-slider',
   rangeContainer: '.js-faceted-slider-container',
@@ -145,6 +149,7 @@ export const passwordPolicy = {
 };
 
 const selectorsMap = {
+  layout,
   qtyInput,
   alert: {
     selector: '#notifications .container',
diff --git a/src/js/helpers/scrollPadding.ts b/src/js/helpers/scrollPadding.ts
new file mode 100644
index 000000000..c3ae88faa
--- /dev/null
+++ b/src/js/helpers/scrollPadding.ts
@@ -0,0 +1,22 @@
+/**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import SelectorsMap from '@constants/selectors-map';
+
+const setScrollPaddingTop = () => {
+  const header = document.querySelector(SelectorsMap.layout.stickyHeader) as HTMLElement;
+
+  if (header) {
+    const headerHeight = header.offsetHeight;
+    document.documentElement.style.setProperty('scroll-padding-top', `${headerHeight}px`);
+  }
+};
+
+const initScrollPaddingTop = () => {
+  window.addEventListener('load', setScrollPaddingTop);
+  window.addEventListener('resize', setScrollPaddingTop);
+};
+
+export default initScrollPaddingTop;
diff --git a/src/js/theme.ts b/src/js/theme.ts
index c234aa519..37c210fba 100644
--- a/src/js/theme.ts
+++ b/src/js/theme.ts
@@ -28,6 +28,7 @@ import './modules/facetedsearch';
 import initDesktopMenu from './modules/ps_mainmenu';
 import initFormValidation from './form-validation';
 import initCategoryTree from './modules/ps_categorytree';
+import initScrollPaddingTop from './helpers/scrollPadding';
 
 initEmitter();
 
@@ -52,6 +53,7 @@ $(() => {
   initErrorHandler();
   usePasswordPolicy('.field-password-policy');
   initCategoryTree();
+  initScrollPaddingTop();
 
   prestashop.on(events.responsiveUpdate, () => {
     initSearchbar();
diff --git a/templates/layouts/layout-both-columns.tpl b/templates/layouts/layout-both-columns.tpl
index 5fcd8b918..04b8a95a5 100644
--- a/templates/layouts/layout-both-columns.tpl
+++ b/templates/layouts/layout-both-columns.tpl
@@ -21,7 +21,7 @@
       {include file='catalog/_partials/product-activation.tpl'}
     {/block}
 
-    <header id="header" class="header">
+    <header id="header" class="header js-sticky-header">
       {block name='header'}
         {include file='_partials/header.tpl'}
       {/block}