Update script.js

script.js

@@ -1,7 +1,7 @@
 document.addEventListener('DOMContentLoaded', () => {
+    // --- 區塊淡入動畫 ---
     const sections = document.querySelectorAll('section');
-
-    const observer = new IntersectionObserver(entries => {
+    const sectionObserver = new IntersectionObserver(entries => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
                 entry.target.classList.add('visible');
@@ -10,63 +10,36 @@ document.addEventListener('DOMContentLoaded', () => {
     }, {
         threshold: 0.1
     });
-
     sections.forEach(section => {
-        observer.observe(section);
-    });
-
-    // 可展開內容
-    document.querySelectorAll('.toggle-header').forEach(header => {
-        header.addEventListener('click', () => {
-            const content = header.nextElementSibling;
-            content.classList.toggle('active');
-            header.classList.toggle('active');
-        });
+        sectionObserver.observe(section);
     });
 
-    // 漢堡選單
-    const navToggle = document.querySelector('.nav-toggle');
-    const navMenu = document.querySelector('.nav-menu');
-
-    navToggle.addEventListener('click', () => {
-        navMenu.classList.toggle('active');
+    // --- 回到頂部按鈕 ---
+    const backToTopButton = document.querySelector('.back-to-top');
+    window.addEventListener('scroll', () => {
+        if (window.pageYOffset > 300) {
+            backToTopButton.classList.add('visible');
+        } else {
+            backToTopButton.classList.remove('visible');
+        }
     });
 
-    // 導航高亮
+    // --- 導覽列高亮 ---
     const navLinks = document.querySelectorAll('.nav-link');
-
-    window.addEventListener('scroll', () => {
-        let current = '';
-        sections.forEach(section => {
-            const sectionTop = section.offsetTop;
-            if (scrollY >= sectionTop - 100) {
-                current = section.getAttribute('id');
-            }
-        });
-
-        navLinks.forEach(link => {
-            link.classList.remove('active');
-            if (link.getAttribute('href').slice(1) === current) {
-                link.classList.add('active');
+    const navObserver = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                navLinks.forEach(link => {
+                    link.classList.toggle('active', link.getAttribute('href').split('#')[1] === entry.target.id);
+                });
             }
         });
+    }, {
+        rootMargin: '-50% 0px -50% 0px' // 觸發區域設定在螢幕正中央
     });
-
-    // 搜尋功能
-    function addSearch() {
-        const searchInput = document.createElement('input');
-        searchInput.type = 'text';
-        searchInput.placeholder = '搜尋內容...';
-        searchInput.classList.add('search-input');
-        document.querySelector('.nav-container').appendChild(searchInput);
-
-        searchInput.addEventListener('input', (e) => {
-            const keyword = e.target.value.toLowerCase();
-            sections.forEach(section => {
-                const text = section.textContent.toLowerCase();
-                section.style.display = text.includes(keyword) ? 'block' : 'none';
-            });
-        });
-    }
-    addSearch();
-});
+    sections.forEach(section => {
+        if(section.id) {
+           navObserver.observe(section);
+        }
+    });
+});