Nav initial active anchor is now set properly when page is already sc…

…rolled down before function loads
untrobotics · Apr 16, 2024 · 04a3e43 · 04a3e43
1 parent 7c81cfa
commit 04a3e43
Showing 1 changed file with 57 additions and 44 deletions.
diff --git a/botathon/index.php b/botathon/index.php
@@ -590,23 +590,50 @@ class="rd-parallax-layer section-top-75 section-md-top-150 section-lg-top-260">
 	let lastScrollTop = windowSelector.scrollTop()
 	const downTolerance = 0.25
 	const upTolerance = 0.5
-	$(window).scroll(function(){
+	$(window).scroll(navChange);
+
+    $(document).ready(function () {
+        // Add smooth scrolling to all links
+        $("#botathon-navigation ul li a").on('click', function (event) {
+
+            // Make sure this.hash has a value before overriding default behavior
+            if (this.hash !== "") {
+                // Prevent default anchor click behavior
+                event.preventDefault();
+
+                // Store hash
+                var hash = this.hash;
+
+                // Using jQuery's animate() method to add smooth page scroll
+                // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
+                $('html, body').animate({
+                    scrollTop: $(hash).offset().top
+                }, 800, function () {
+
+                    // Add hash (#) to URL when done scrolling (default click behavior)
+                    window.location.hash = hash;
+                });
+            } // End if
+        });
+		let scrollTop = windowSelector.scrollTop()
+		let scrollBottom = scrollTop + windowSelector.height()
+		for(let i = 0; i < 7; i++){
+			let anchor = anchorSelectors[i];
+			if(elementInView(anchor,scrollTop,scrollBottom)){
+				switchActive(i)
+				break
+			}
+		}
+    });
+
+	function navChange(){
 		let currentScrollTop = windowSelector.scrollTop()
 		let windowHeight = windowSelector.height()
 		let scrollBottom = currentScrollTop + windowHeight
-		function elementInView(elem)
-		{
-			let elemTop = elem.offset().top + parseInt(elem.css('padding-top'),10)
-			let elemBottom = elemTop + elem.height()
-			return (elemTop <= currentScrollTop && elemBottom >= currentScrollTop) || (elemTop >= currentScrollTop && elemTop <= scrollBottom) || (elemBottom >= currentScrollTop && elemBottom <= scrollBottom)
-		}
+
 		function getTop(elem){return elem.offset().top + parseInt(elem.css('padding-top'),10)}
 		function getBottom(elem) {return getTop(elem)+ elem.height()}
-		function switchActive(i){
-			navSelectors[curIndex].classList.remove('active')
-			navSelectors[i].classList.add('active')
-			curIndex = i
-		}
+
 
 		if(currentScrollTop > lastScrollTop){ // scrolled down
 			if(curIndex!==6 && Math.floor(getBottom(footerSelector))<= scrollBottom)
@@ -621,7 +648,7 @@ function switchActive(i){
 					return
 				}
 				for(let i = curIndex+1;i<7;i++){
-					if(elementInView(anchorSelectors[i])){
+					if(elementInView(anchorSelectors[i]),currentScrollTop,scrollBottom){
 						switchActive(i)
 						break
 					}
@@ -634,39 +661,25 @@ function switchActive(i){
 					return
 				}
 				for(let i = curIndex-1;i>=0;i--){
-						if (elementInView(anchorSelectors[i])) {
-							switchActive(i)
-							break
-						}
+					if (elementInView(anchorSelectors[i],currentScrollTop,scrollBottom)) {
+						switchActive(i)
+						break
+					}
 				}
 			}
 		}
 		lastScrollTop = currentScrollTop
-	});
-
-    $(document).ready(function () {
-        // Add smooth scrolling to all links
-        $("#botathon-navigation ul li a").on('click', function (event) {
-
-            // Make sure this.hash has a value before overriding default behavior
-            if (this.hash !== "") {
-                // Prevent default anchor click behavior
-                event.preventDefault();
-
-                // Store hash
-                var hash = this.hash;
-
-                // Using jQuery's animate() method to add smooth page scroll
-                // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
-                $('html, body').animate({
-                    scrollTop: $(hash).offset().top
-                }, 800, function () {
-
-                    // Add hash (#) to URL when done scrolling (default click behavior)
-                    window.location.hash = hash;
-                });
-            } // End if
-        });
-
-    });
+	}
+
+	function elementInView(elem,currentScrollTop,scrollBottom)
+	{
+		let elemTop = elem.offset().top + parseInt(elem.css('padding-top'),10)
+		let elemBottom = elemTop + elem.height()
+		return (elemTop <= currentScrollTop && elemBottom >= currentScrollTop) || (elemTop >= currentScrollTop && elemTop <= scrollBottom) || (elemBottom >= currentScrollTop && elemBottom <= scrollBottom)
+	}
+	function switchActive(i){
+		navSelectors[curIndex].classList.remove('active')
+		navSelectors[i].classList.add('active')
+		curIndex = i
+	}
 </script>