document.addEventListener('DOMContentLoaded', function () { const sections = document.querySelectorAll('section[id]') const navItems = document.querySelectorAll('.sidebar .nav-item') const sidebar = document.querySelector('.sidebar') const footer = document.getElementById('footer') document.querySelectorAll('.sidebar a[href^="#"]').forEach((link) => { const target = link.getAttribute('href') const parentItem = link.closest('.nav-item') if (parentItem && target) { parentItem.setAttribute('data-target', target) } }) function updateActiveLink() { let currentSectionId = null sections.forEach((section) => { const rect = section.getBoundingClientRect() if (rect.top <= 100 && rect.bottom >= 50) { currentSectionId = section.id } }) navItems.forEach((item) => item.classList.remove('active')) if (!currentSectionId) return const activeItem = document.querySelector( `.sidebar .nav-item[data-target="#${currentSectionId}"]` ) if (activeItem) { activeItem.classList.add('active') } } function adjustSidebarPosition() { if (!sidebar || !footer) return const footerRect = footer.getBoundingClientRect() const sidebarHeight = sidebar.offsetHeight const scrollTop = window.scrollY || document.documentElement.scrollTop const footerTop = scrollTop + footerRect.top const bodyContainer = document.querySelector('.body-container') const bodyBottom = bodyContainer ? bodyContainer.offsetTop + bodyContainer.offsetHeight : footerTop const initialSidebarTop = window.innerHeight * 0.2 const sidebarBottomOnPage = scrollTop + initialSidebarTop + sidebarHeight if (sidebarBottomOnPage >= footerTop - 20) { sidebar.style.position = 'absolute' sidebar.style.top = `${bodyBottom - sidebarHeight - 20}px` } else { sidebar.style.position = 'fixed' sidebar.style.top = `${20}%` } } window.addEventListener('scroll', () => { updateActiveLink() adjustSidebarPosition() }) window.addEventListener('resize', adjustSidebarPosition) updateActiveLink() adjustSidebarPosition() })