Gestionnaire de fichiers - Editer - /home/kridsana/webapp.cm.in.th/663012801/u66301280015/portfolios/Javascript/activelink.js
Arrière
document.addEventListener("DOMContentLoaded", function () { const navLinks = document.querySelectorAll(".nav-bar-menu a"); // ฟังก์ชันอัปเดต active class function updateActiveLink(targetId) { navLinks.forEach(link => { if (link.getAttribute("href") === `#${targetId}`) { link.classList.add("active-link"); link.classList.remove("deactive-link"); } else { link.classList.remove("active-link"); link.classList.add("deactive-link"); } }); } // คลิกที่เมนู -> smooth scroll + active link navLinks.forEach(link => { link.addEventListener("click", function (e) { if (this.getAttribute("href").startsWith("#")) { e.preventDefault(); const targetId = this.getAttribute("href").substring(1); const targetSection = document.getElementById(targetId); if (targetSection) { window.scrollTo({ top: targetSection.offsetTop - 50, behavior: "smooth" }); } updateActiveLink(targetId); } }); }); // ตรวจจับเมื่อ scroll ถึง section แล้วอัปเดต active link const sections = document.querySelectorAll("section"); // ฟังก์ชันสำหรับตรวจสอบว่า section ไหนอยู่บนหน้าจอ function checkActiveSection() { sections.forEach(section => { const rect = section.getBoundingClientRect(); const targetId = section.id; if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) { updateActiveLink(targetId); } }); } // ใช้ IntersectionObserver เพื่อตรวจจับการเข้าสู่หน้าจอ const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { updateActiveLink(entry.target.id); } }); }, { threshold: 0.5 }); sections.forEach(section => observer.observe(section)); // ตรวจสอบเมื่อ scroll window.addEventListener("scroll", checkActiveSection); // ตรวจสอบเมื่อหน้าถูกโหลด window.addEventListener("load", checkActiveSection); });
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Génération de la page: 0.15 |
proxy
|
phpinfo
|
Réglages