50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
// Javascript is active
|
|
document.documentElement.classList.add('js');
|
|
|
|
// Add class when scrolling in the page
|
|
const header = document.getElementById("site-header");
|
|
const intercept = document.createElement("div");
|
|
|
|
intercept.setAttribute("data-observer-intercept", "");
|
|
header.before(intercept);
|
|
|
|
const observer = new IntersectionObserver(([entry]) => {
|
|
header.classList.toggle("scroll", !entry.isIntersecting);
|
|
});
|
|
|
|
observer.observe(intercept);
|
|
|
|
// Update navigation according to page scroll
|
|
const options = {
|
|
rootMargin: '0px 0px -60% 0px'
|
|
};
|
|
const sectionObserver = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
const id = entry.target.getAttribute("id");
|
|
if (entry.isIntersecting) {
|
|
document.querySelectorAll('[aria-current="page"]').forEach((z) => {
|
|
z.removeAttribute('aria-current', 'page')
|
|
});
|
|
const target = document.querySelector(`a[href="#${id}"]`);
|
|
if (target) {
|
|
document.querySelector(`a[href="#${id}"]`).setAttribute('aria-current', 'page');
|
|
}
|
|
}
|
|
});
|
|
},options);
|
|
|
|
document.querySelectorAll('section').forEach(function(section, i) {
|
|
sectionObserver.observe(section);
|
|
});
|
|
|
|
// Random accent font & color
|
|
const random = (min, max) => {
|
|
return Math.floor(Math.random() * (max-min+1) + min);
|
|
}
|
|
|
|
function randomFont() {
|
|
let randomNumber = random(1, 3);
|
|
document.documentElement.style.setProperty("--accent-font", `var(--accent-font-${randomNumber})`);
|
|
}
|
|
|
|
randomFont(); |