Including promo and localnav height to sticky blocks top when it is present

libs/blocks/global-navigation/utilities/utilities.js

@@ -10,6 +10,9 @@
 loadLana();
 
 const FEDERAL_PATH_KEY = 'federal';
+// Set a default height for LocalNav,
+// as sticky blocks position themselves before LocalNav loads into the DOM.
+const DEFAULT_LOCALNAV_HEIGHT = 40;
 
 const selectorMap = {
   headline: '.feds-menu-headline[aria-expanded="true"]',
@@ -542,3 +545,26 @@
   if (f(xs[0])) return dropWhile(xs.slice(1), f);
   return xs;
 };
+
+export function isLocalNav() {
+  const { locale = {} } = getConfig();
+  const gnavSource = getMetadata('gnav-source') || `${locale.contentRoot}/gnav`;
+  let newNavEnabled = new URLSearchParams(window.location.search).get('newNav');
+  newNavEnabled = newNavEnabled ? newNavEnabled !== 'false' : getMetadata('mobile-gnav-v2') !== 'off';
+  return gnavSource.split('/').pop().startsWith('localnav-') && newNavEnabled;
+}
+
+export function getGnavHeight() {
+  let topHeight = document.querySelector('header')?.offsetHeight || 0;
+  if (isLocalNav()) {
+    const localNav = document.querySelector('.feds-localnav');
+    topHeight = localNav.offsetHeight || DEFAULT_LOCALNAV_HEIGHT;
+  }
+
+  const fedsPromo = document.querySelector('.feds-promo-aside-wrapper');
+  if (fedsPromo instanceof HTMLElement) {
+    topHeight += fedsPromo.offsetHeight;
+  }
+
+  return topHeight;
+}

libs/blocks/section-metadata/sticky-section.js

@@ -1,17 +1,9 @@
 import { createTag } from '../../utils/utils.js';
 import { getMetadata, getDelayTime } from './section-metadata.js';
+import { getGnavHeight } from '../global-navigation/utilities/utilities.js';
 
 function handleTopHeight(section) {
-  let topHeight = document.querySelector('header')?.offsetHeight ?? 0;
-  const localNav = document.querySelector('.feds-localnav');
-  const fedsPromo = document.querySelector('.feds-promo-wrapper');
-  if (localNav && localNav.offsetHeight > 0) {
-    topHeight = localNav.offsetHeight;
-  }
-  if (fedsPromo) {
-    topHeight += fedsPromo.offsetHeight;
-  }
-
+  const topHeight = getGnavHeight();
   section.style.top = `${topHeight}px`;
 }
 

libs/blocks/table/table.js

@@ -2,6 +2,7 @@
 import { createTag, MILO_EVENTS } from '../../utils/utils.js';
 import { decorateButtons } from '../../utils/decorate.js';
 import { debounce } from '../../utils/action.js';
+import { getGnavHeight } from '../global-navigation/utilities/utilities.js';
 
 const DESKTOP_SIZE = 900;
 const MOBILE_SIZE = 768;
@@ -374,9 +375,8 @@ function handleHovering(table) {
   }
 }
 
-function handleScrollEffect(table) {
-  const gnav = document.querySelector('header');
-  const gnavHeight = gnav ? gnav.offsetHeight : 0;
+async function handleScrollEffect(table) {
+  const gnavHeight = getGnavHeight();
   const highlightRow = table.querySelector('.row-highlight');
   const headingRow = table.querySelector('.row-heading');
 

libs/mep/ace0861/section-metadata/sticky-section.js

@@ -1,17 +1,9 @@
 import { createTag } from '../../../utils/utils.js';
 import { getMetadata, getDelayTime } from './section-metadata.js';
+import { getGnavHeight } from '../../../blocks/global-navigation/utilities/utilities.js';
 
 function handleTopHeight(section) {
-  let topHeight = document.querySelector('header').offsetHeight;
-  const localNav = document.querySelector('.feds-localnav');
-  const fedsPromo = document.querySelector('.feds-promo-wrapper');
-  if (localNav) {
-    topHeight = localNav.offsetHeight;
-  }
-  if (fedsPromo) {
-    topHeight += fedsPromo.offsetHeight;
-  }
-
+  const topHeight = getGnavHeight();
   section.style.top = `${topHeight}px`;
 }
 

libs/utils/utils.js

@@ -812,10 +812,9 @@ async function decorateHeader() {
   const dynamicNavActive = getMetadata('dynamic-nav') === 'on'
     && window.sessionStorage.getItem('gnavSource') !== null;
   if (!dynamicNavActive && (baseBreadcrumbs || breadcrumbs || autoBreadcrumbs)) header.classList.add('has-breadcrumbs');
-  const gnavSource = await getGnavSource();
-  let newNavEnabled = new URLSearchParams(window.location.search).get('newNav');
-  newNavEnabled = newNavEnabled ? newNavEnabled !== 'false' : getMetadata('mobile-gnav-v2') !== 'off';
-  if (gnavSource.split('/').pop().startsWith('localnav-') && newNavEnabled) {
+  const { isLocalNav } = await import('../blocks/global-navigation/utilities/utilities.js');
+  const hasLocalNav = await isLocalNav();
+  if (hasLocalNav) {
     // Preserving space to avoid CLS issue
     const localNavWrapper = createTag('div', { class: 'feds-localnav' });
     header.after(localNavWrapper);

test/blocks/global-navigation/utilities/utilities.test.js

@@ -15,6 +15,7 @@ import {
   logErrorFor,
   takeWhile,
   dropWhile,
+  getGnavHeight,
 } from '../../../../libs/blocks/global-navigation/utilities/utilities.js';
 import { setConfig, getConfig } from '../../../../libs/utils/utils.js';
 import { createFullGlobalNavigation, config } from '../test-utilities.js';
@@ -476,5 +477,16 @@ describe('global navigation utilities', () => {
       expect(result).to.deep.equal([]);
       expect(predicate.callCount).to.equal(0);
     });
+
+    it('should give correct top height when localnav is present', () => {
+      const gnavSourceMeta = toFragment`<meta name="gnav-source" content="http://localhost:2000/ch_de/libs/feds/localnav-gnav">`;
+      const enableMobileGnav = toFragment`<meta name="mobile-gnav-v2" content="on">`;
+      document.head.append(gnavSourceMeta, enableMobileGnav);
+      const gnav = toFragment`<header class="global-navigation"></header>`;
+      const lnav = toFragment`<div class="feds-localnav"></div>`;
+      document.body.append(gnav, lnav);
+      const gnavHeight = getGnavHeight();
+      expect(gnavHeight).to.equal(40);
+    });
   });
 });