10 scroll project new setup

Author: john-smilga

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+ "git.ignoreLimitWarning": true
+}

10-scroll/final/app.js

@@ -0,0 +1,79 @@
+// Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
+
+// pageYOffset is a read - only window property that returns the number of pixels the document has been scrolled vertically.
+// slice extracts a section of a string without modifying original string
+//offsetTop - A Number, representing the top position of the element, in pixels
+
+// ********** set date ************
+// select span
+const date = document.getElementById("date");
+date.innerHTML = new Date().getFullYear();
+
+// ********** close links ************
+const navToggle = document.querySelector(".nav-toggle");
+const linksContainer = document.querySelector(".links-container");
+const links = document.querySelector(".links");
+
+navToggle.addEventListener("click", function () {
+  // linksContainer.classList.toggle("show-links");
+
+  const linksHeight = links.getBoundingClientRect().height;
+  const containerHeight = linksContainer.getBoundingClientRect().height;
+  if (containerHeight === 0) {
+    linksContainer.style.height = `${linksHeight}px`;
+  } else {
+    linksContainer.style.height = 0;
+  }
+  // console.log(linksContainer.getBoundingClientRect());
+});
+
+// ********** fixed navbar ************
+
+const navbar = document.getElementById("nav");
+const topLink = document.querySelector(".top-link");
+
+window.addEventListener("scroll", function () {
+  const height = window.pageYOffset;
+  if (height > 96) {
+    navbar.classList.add("fixed-nav");
+  } else {
+    navbar.classList.remove("fixed-nav");
+  }
+  // setup back to top link
+  if (height > 500) {
+    topLink.classList.add("show-link");
+  } else {
+    topLink.classList.remove("show-link");
+  }
+});
+
+// ********** smooth scroll ************
+// select links
+const scrollLinks = document.querySelectorAll(".scroll-link");
+scrollLinks.forEach((link) => {
+  link.addEventListener("click", (e) => {
+    // prevent default
+    e.preventDefault();
+    // navigate to specific spot
+    const id = e.currentTarget.getAttribute("href").slice(1);
+    const element = document.getElementById(id);
+    // calculate heights
+    const navHeight = navbar.getBoundingClientRect().height;
+    const containerHeight = linksContainer.getBoundingClientRect().height;
+    const fixedNav = navbar.classList.contains("fixed-nav");
+    let position = element.offsetTop - navHeight;
+
+    if (!fixedNav) {
+      position = position - navHeight;
+    }
+    if (navHeight > 82) {
+      position = position + containerHeight;
+    }
+    window.scrollTo({
+      left: 0,
+      top: position,
+    });
+    // close
+    linksContainer.style.height = 0;
+  });
+});