Local images, html sections, styling and scripts reviewed.

public/assets/js/navigation.js

@@ -1,7 +1,7 @@
 /**
- * @type {HTMLVideoElement}
+ * @type {NodeListOf<HTMLVideoElement>}
  */
-const heroVid = document.querySelector('.hero video');
+const parallaxElems = document.querySelectorAll('.parallax');
 
 /**
  * @type {NodeListOf<HTMLAnchorElement>}
@@ -20,13 +20,24 @@ window.addEventListener('scroll', () =>
   document.body.classList.toggle('is-scrolled', window.scrollY > 0);
 
   // Parallax effect.
-  heroVid.style.top = `${window.scrollY / 3}px`;
+  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`;
+  });
 
   // Highlight menu item when scrolled to section.
   let current = '';
   sections.forEach(section =>
   {
-    const sectionTop = section.offsetTop;
+    const rect = section.getBoundingClientRect();
+    const sectionTop = rect.top + window.scrollY;
 
     if (window.scrollY >= sectionTop - 70)
     {
@@ -45,14 +56,26 @@ window.addEventListener('scroll', () =>
   });
 });
 
-document.querySelectorAll('h1, h2').forEach(header =>
+sections.forEach(section =>
 {
-  if (header.id)
+  if (section.id)
   {
     const anchor = document.createElement('a');
     anchor.className = 'anchor-link';
-    anchor.href = `#${header.id}`;
+    anchor.href = `#${section.id}`;
     anchor.innerHTML = ' #&nbsp;';
-    header.appendChild(anchor);
+    section.appendChild(anchor);
   }
+});
+
+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();
+  });
 });