Optimized javascript and anchor links.

public/assets/js/navigation.js

@@ -0,0 +1,58 @@
+/**
+ * @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);
+  }
+});