script header visible
All checks were successful
Deploy / Deploy to pre-production (push) Successful in 6s

This commit is contained in:
Julie Blanc 2025-12-23 17:29:27 +01:00
parent 430fd243fe
commit 08ebf7fc9e
11 changed files with 112 additions and 55 deletions

36
assets/js/header.js Normal file
View file

@ -0,0 +1,36 @@
// ===============================
// HEADER
// ===============================
export function headerToggle() {
const header = document.getElementById("site-header");
const buttonToggle = document.querySelector("#menu-toggle");
console.log(header);
console.log(buttonToggle);
if (!header || !buttonToggle) return;
buttonToggle.addEventListener("click", () => {
document.body.classList.toggle("menu-open");
});
}
export function headerScrollVisibility() {
const header = document.getElementById("site-header");
const hero = document.getElementById("hero");
if (!header || !hero) return;
function checkScroll() {
const headerHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-h')) || 0;
const heroBottom = hero.getBoundingClientRect().bottom;
if (heroBottom <= headerHeight) {
header.classList.add("is-visible");
} else {
header.classList.remove("is-visible");
}
}
window.addEventListener("scroll", checkScroll);
checkScroll(); // Vérifier au chargement
}

View file

@ -1,8 +1,10 @@
//TEMP, with includeHTML() --------------------------------------
import { headerToggle, headerScrollVisibility } from './header.js';
// TEMP, with includeHTML() --------------------------------------
window.onload = async function () {
await runIncludeHTML();
initAfterLoad();
await runIncludeHTML();
initAfterLoad();
};
function runIncludeHTML() {
@ -18,7 +20,7 @@ function runIncludeHTML() {
}
/// INIT--------------------------------------------------------
/// INIT --------------------------------------------------------
// Note: une fois que IncludeHTML() est supprimé, on peut supprimer tout le temp au dessus
// remplacer `function initAfterLoad()` par ↓
@ -26,26 +28,5 @@ function runIncludeHTML() {
function initAfterLoad() {
headerToggle();
headerScrollVisibility();
}
// ===============================
// HEADER
// ===============================
function headerToggle() {
const header = document.getElementById("site-header");
const buttonToggle = document.querySelector("#menu-toggle");
console.log(header);
console.log(buttonToggle);
if (!header || !buttonToggle) return;
buttonToggle.addEventListener("click", () => {
document.body.classList.toggle("menu-open");
});
}