Vandevliet.AerialShots.Website/public/assets/js/navigation.js

/**
 * @type {HTMLVideoElement}
 */
const heroVid = document.querySelector('.hero video');

/**
 * @type {NodeListOf<HTMLAnchorElement>}
 */
const navlinks = document.querySelectorAll('a.nav-link');

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

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

  // Parallax effect.
  heroVid.style.top = `${window.scrollY / 3}px`;

  // Highlight menu item when scrolled to section.
  let current = '';
  sections.forEach(section =>
  {
    const sectionTop = section.offsetTop;

    if (window.scrollY >= sectionTop - 70)
    {
      current = section.getAttribute('id');
    }
  });

  navlinks.forEach(link =>
  {
    link.classList.remove('active');

    if (link.getAttribute('href') === `#${current}`)
    {
      link.classList.add('active');
    }
  });
});

document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(header =>
{
  if (header.id)
  {
    const anchor = document.createElement('a');
    anchor.className = 'anchor-link';
    anchor.href = `#${header.id}`;
    anchor.innerHTML = ' #&nbsp;';
    header.appendChild(anchor);
  }
});