script header visible
All checks were successful
Deploy / Deploy to pre-production (push) Successful in 6s
All checks were successful
Deploy / Deploy to pre-production (push) Successful in 6s
This commit is contained in:
parent
430fd243fe
commit
08ebf7fc9e
11 changed files with 112 additions and 55 deletions
36
assets/js/header.js
Normal file
36
assets/js/header.js
Normal 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
|
||||
}
|
||||
|
||||
|
|
@ -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");
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue