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

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

  // Handle scroll events.
  window.addEventListener('scroll', () =>
  {
  // Add class to body when scrolled.
    document.body.classList.toggle('is-scrolled', window.scrollY > 0);

    // Parallax effect.
    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`;
    });
  });

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

  sections.forEach(section =>
  {
    const anchorTarget = section.querySelector('[id^="section-"]');
    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);
    }
  });

  document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor =>
  {
    anchor.addEventListener('click', () =>
    {
      /**
       * @type {HTMLButtonElement}
       */
      const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]');
      navbarNav?.click();
    });
  });
});