Vandevliet.AerialShots.Website/src/js/scripts.js

const highlightSectionFromHash = () =>
{
  const { hash } = window.location;

  if (hash === '#contact')
  {
    const section = document.getElementById(hash.substring(1))?.parentElement;// .closest('section');

    if (section)
    {
      setTimeout(() =>
      {
        section.classList.add('scrollto-highlight');
        setTimeout(() => section.classList.remove('scrollto-highlight'), 1000);
      }, 500);
    }
  }
};

window.addEventListener('hashchange', highlightSectionFromHash);

window.addEventListener('pageshow', () =>
{
  /**
   * @type {NodeListOf<HTMLVideoElement>}
   */
  const parallaxElems = document.querySelectorAll('.parallax');

  const refreshScrollLinkedPositioningEffect = () =>
  {
    document.body.classList.toggle('is-scrolled', window.scrollY > 0);

    parallaxElems.forEach(parallaxElem =>
    {
      const parentElem = parallaxElem.parentElement;

      const parentRect = parentElem.getBoundingClientRect();
      const parentScroll = parentRect.top + (parentRect.height / 2);

      const windowScroll = window.scrollY + (window.innerHeight / 2);

      parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`;
    });
  };

  refreshScrollLinkedPositioningEffect();
  window.addEventListener('scroll', refreshScrollLinkedPositioningEffect);

  highlightSectionFromHash();
});

document.addEventListener('DOMContentLoaded', () =>
{
  /**
   * @type {NodeListOf<HTMLElement>}
   */
  const sections = document.querySelectorAll('section');

  sections.forEach(section =>
  {
    const anchorTarget = section.querySelector('[id]');
    const anchorHeader = section.querySelector('h1,h2');

    if (anchorTarget && anchorHeader)
    {
      const anchorLink = document.createElement('a');
      anchorLink.className = 'anchor-link';
      anchorLink.href = `#${anchorTarget.id}`;
      anchorLink.innerHTML = ' #&nbsp;';
      anchorHeader.appendChild(anchorLink);
    }
  });

  // Collapse the navbar in mobile view after clicking a link.
  document.querySelectorAll('#navbarNav li.nav-item>a').forEach(navLink =>
  {
    navLink.addEventListener('click', () =>
    {
      /**
       * @type {HTMLButtonElement}
       */
      const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]');
      navbarNav?.click();
    });
  });
});