new navigation

app.js

@@ -65,8 +65,72 @@
         wrap.appendChild(iframe);
     }
 
+    /* ------------------------------------------------------------------
+     * Sticky Navigation & Back-to-Top
+     * ------------------------------------------------------------------ */
+    function initNavigation() {
+        var nav = document.getElementById("sticky-nav");
+        var backToTop = document.getElementById("back-to-top");
+        var navLinks = document.querySelectorAll(".nav-link[data-section]");
+        var sections = [];
+
+        navLinks.forEach(function (link) {
+            var id = link.getAttribute("data-section");
+            var el = document.getElementById(id);
+            if (el) sections.push({ id: id, el: el, link: link });
+        });
+
+        function onScroll() {
+            var scrollY = window.scrollY || window.pageYOffset;
+
+            if (scrollY > 300) {
+                nav.classList.add("visible");
+                backToTop.classList.add("visible");
+            } else {
+                nav.classList.remove("visible");
+                backToTop.classList.remove("visible");
+            }
+
+            var active = null;
+            for (var i = 0; i < sections.length; i++) {
+                var rect = sections[i].el.getBoundingClientRect();
+                if (rect.top <= 120) active = sections[i];
+            }
+
+            navLinks.forEach(function (l) { l.classList.remove("active"); });
+            if (active) active.link.classList.add("active");
+        }
+
+        window.addEventListener("scroll", onScroll, { passive: true });
+        onScroll();
+
+        backToTop.addEventListener("click", function () {
+            window.scrollTo({ top: 0, behavior: "smooth" });
+        });
+
+        navLinks.forEach(function (link) {
+            link.addEventListener("click", function (e) {
+                e.preventDefault();
+                var id = this.getAttribute("data-section");
+                var target = document.getElementById(id);
+                if (target) {
+                    target.scrollIntoView({ behavior: "smooth" });
+                }
+            });
+        });
+
+        var brandLink = document.querySelector(".nav-brand");
+        if (brandLink) {
+            brandLink.addEventListener("click", function (e) {
+                e.preventDefault();
+                window.scrollTo({ top: 0, behavior: "smooth" });
+            });
+        }
+    }
+
     document.addEventListener("DOMContentLoaded", function () {
         loadYouTube();
         loadTwitch();
+        initNavigation();
     });
 })();