@caweb/html-webpack-plugin 1.5.26 → 1.5.28

package/build/sacramento.js

@@ -6365,17 +6365,27 @@ __webpack_require__.r(__webpack_exports__);
 //@ts-check
 window.addEventListener('DOMContentLoaded', () => {
   let location_hash = window.location.hash.replace(/(\|)/g, "\\$1");
+  let target = document.querySelector(location_hash);
   const header = document.querySelector('header');
   const pageContainer = document.querySelector('#page-container');
   const alerts = document.querySelector('.alerts');
   const utilityHeader = document.querySelector('.utility-header');
+
+  // scroll to target
+  if (target) {
+    setTimeout(() => {
+      target.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }, 1000);
+  }
+  if (!header) {
+    return;
+  }
   const compactHeader = () => {
-    if (!header) {
-      return;
-    }
     let scrollHeights = 0;
 
-    // lets collect the scroll height of any elements above the header.
+    // lets collect the height of any elements above the header.
     let current = header.previousElementSibling;
     let miscElementHeights = 0;
     while (current) {
@@ -6390,38 +6400,34 @@ window.addEventListener('DOMContentLoaded', () => {
     if (document.body.scrollTop >= header.offsetHeight || document.documentElement.scrollTop >= header.offsetHeight) {
       // lets add the scroll heights of any alerts
       if (alerts) {
-        scrollHeights += alerts.scrollHeight;
+        scrollHeights += alerts.clientHeight;
       }
 
       // lets add the scroll heights of the utility header
       if (utilityHeader) {
-        scrollHeights += utilityHeader.scrollHeight;
+        scrollHeights += utilityHeader.clientHeight;
       }
 
       // move the header up to the scroll height, minus any elements above the header
       header.style.top = `-${scrollHeights - miscElementHeights}px`;
 
       // we add the header height + misc element heights to the page container as margin-top, minus the scroll heights since those get hidden
-      pageContainer?.setAttribute('style', `margin-top: ${header.offsetHeight + miscElementHeights - scrollHeights}px;`);
+      pageContainer?.setAttribute('style', `margin-top: ${header.clientHeight + miscElementHeights - scrollHeights}px;`);
     } else {
-      header.style.top = `${miscElementHeights}px`; // reset header top position
-
-      pageContainer?.setAttribute('style', `margin-top: ${miscElementHeights}px;`);
+      // reset header to initial position
+      header.style.top = `${miscElementHeights}px`;
+      pageContainer?.setAttribute('style', `margin-top: ${header.clientHeight + miscElementHeights}px;`);
     }
+
+    // for each element with an id we add the scroll-margin-top
+    document.querySelectorAll('#page-container [id]').forEach(element => {
+      element?.setAttribute('style', `scroll-margin-top: ${header.clientHeight + miscElementHeights - scrollHeights}px;`);
+    });
   };
 
   // reset position on scroll
   window.addEventListener('scroll', compactHeader);
-
-  // scroll to target
-  if (location_hash) {
-    let target = document.querySelector(location_hash);
-    setTimeout(() => {
-      target?.scrollIntoView({
-        behavior: 'smooth'
-      });
-    }, 1000);
-  }
+  compactHeader();
 });
 
 /***/ }),