36 lines
1.2 KiB
JavaScript
36 lines
1.2 KiB
JavaScript
// js/ui.js
|
|
// Shared UI enhancements: Glass Header on scroll & Back-to-Top button.
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const header = document.querySelector('header.nav');
|
|
// Don't run if there's no header on the page
|
|
if (!header) return;
|
|
|
|
// 1. Create and inject Back-to-Top button
|
|
const btt = document.createElement('div');
|
|
btt.className = 'back-to-top';
|
|
btt.setAttribute('aria-label', 'Scroll to top');
|
|
btt.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>`;
|
|
document.body.appendChild(btt);
|
|
|
|
// 2. Click listener to scroll to top
|
|
btt.addEventListener('click', () => {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
});
|
|
|
|
// 3. Scroll listener to show/hide elements
|
|
let isTicking = false;
|
|
window.addEventListener('scroll', () => {
|
|
if (!isTicking) {
|
|
window.requestAnimationFrame(() => {
|
|
const scrollY = window.scrollY;
|
|
if (scrollY > 200) {
|
|
btt.classList.add('visible');
|
|
} else {
|
|
btt.classList.remove('visible');
|
|
}
|
|
isTicking = false;
|
|
});
|
|
isTicking = true;
|
|
}
|
|
});
|
|
});
|