diff --git a/app.js b/app.js
index 991af03..7005d47 100644
--- a/app.js
+++ b/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();
});
})();
\ No newline at end of file
diff --git a/index.html b/index.html
index d9bae5c..2d9dacf 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,33 @@
+
+
+
+
@@ -162,6 +188,11 @@
+
+
+
diff --git a/style.css b/style.css
index 0b8d4d7..a411092 100644
--- a/style.css
+++ b/style.css
@@ -45,6 +45,7 @@ body {
justify-content: center;
text-align: center;
padding: 60px 20px;
+ scroll-margin-top: 0;
background:
radial-gradient(ellipse at 15% 30%, rgba(255, 0, 0, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 50% 70%, rgba(0, 242, 234, 0.08) 0%, transparent 50%),
@@ -129,8 +130,111 @@ body {
.btn-lg { padding: 18px 36px; font-size: 1.1rem; }
+/* Sticky Navigation */
+.sticky-nav {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1000;
+ background: rgba(10, 10, 10, 0.85);
+ backdrop-filter: blur(16px);
+ -webkit-backdrop-filter: blur(16px);
+ border-bottom: 1px solid var(--border);
+ transform: translateY(-100%);
+ transition: transform 0.3s ease;
+}
+
+.sticky-nav.visible {
+ transform: translateY(0);
+}
+
+.nav-inner {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 56px;
+}
+
+.nav-brand {
+ font-weight: 900;
+ font-size: 1.2rem;
+ letter-spacing: -1px;
+ background: linear-gradient(135deg, #fff 0%, #c0c0c0 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.nav-links {
+ display: flex;
+ gap: 4px;
+}
+
+.nav-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 8px 14px;
+ border-radius: 8px;
+ font-size: 0.85rem;
+ font-weight: 600;
+ color: var(--text-secondary);
+ text-decoration: none;
+ transition: all 0.2s ease;
+}
+
+.nav-link:hover {
+ color: var(--text-primary);
+ background: rgba(255, 255, 255, 0.06);
+}
+
+.nav-link.active {
+ color: var(--text-primary);
+ background: rgba(255, 255, 255, 0.1);
+}
+
+/* Back-to-Top Button */
+.back-to-top {
+ position: fixed;
+ bottom: 32px;
+ right: 32px;
+ z-index: 999;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ border: 1px solid var(--border);
+ background: var(--bg-card);
+ color: var(--text-primary);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(16px);
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+
+.back-to-top.visible {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+}
+
+.back-to-top:hover {
+ background: var(--twitch-purple);
+ border-color: var(--twitch-purple);
+ transform: translateY(-2px);
+ box-shadow: 0 6px 24px rgba(145, 70, 255, 0.4);
+}
+
/* Sections */
-.section { padding: 90px 0; scroll-margin-top: 20px; }
+.section { padding: 90px 0; scroll-margin-top: 64px; }
.section-alt { background: var(--bg-secondary); }
.channel-head {
@@ -350,6 +454,12 @@ body {
.discord-card { padding: 28px 20px; }
.discord-profile { flex-direction: column; text-align: center; }
+
+ .nav-links { gap: 0; }
+ .nav-link { padding: 8px 8px; font-size: 0.75rem; }
+ .nav-link svg { display: none; }
+
+ .back-to-top { bottom: 20px; right: 20px; width: 42px; height: 42px; }
}
@media (max-width: 480px) {