From c95a1b08edf9feebeb114be95852563202ab359f Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Sat, 29 Jun 2024 15:45:14 +0200
Subject: [PATCH] added hightlight back
---
src/utils/highlight.js | 32 ++++++++++++++++++++++++++++++++
1 file changed, 32 insertions(+)
create mode 100644 src/utils/highlight.js
diff --git a/src/utils/highlight.js b/src/utils/highlight.js
new file mode 100644
index 00000000..f169136a
--- /dev/null
+++ b/src/utils/highlight.js
@@ -0,0 +1,32 @@
+// Get all sections that have an ID defined
+const sections = document.querySelectorAll("section");
+console.log("Selections: " + sections)
+
+// Add an event listener listening for scroll
+window.addEventListener("scroll", navHighlighter);
+
+function navHighlighter() {
+
+ // Get current scroll position
+ let scrollY = window.pageYOffset;
+
+ // Now we loop through sections to get height, top and ID values for each
+ sections.forEach(current => {
+ const sectionHeight = current.offsetHeight;
+ const sectionTop = current.offsetTop - 50;
+ sectionId = current.getAttribute("id");
+
+ /*
+ - If our current scroll position enters the space where current section on screen is, add .active class to corresponding navigation link, else remove it
+ - To know which link needs an active class, we use sectionId variable we are getting while looping through sections as an selector
+ */
+ if (
+ scrollY > sectionTop &&
+ scrollY <= sectionTop + sectionHeight
+ ){
+ document.querySelector(".navigation a[href*=" + sectionId + "]").classList.add("active");
+ } else {
+ document.querySelector(".navigation a[href*=" + sectionId + "]").classList.remove("active");
+ }
+ });
+}
--
GitLab