Merge pull request #641 from tblivet/feat/scroll_padding

Feat: handle scroll offset on anchor links

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',

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;

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();

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}