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

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

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

  sectionsWithId.forEach(anchorTarget =>
  {
    const anchorHeader = anchorTarget.querySelector('h1,h2');

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