script header visible

assets/css/base/_responsive.scss

@@ -1,6 +1,7 @@
 $desktop: "screen and (min-width: 1200px)";
 $medium: "screen and (max-width: 1080px)";
 $medium-up: "screen and (min-width: 1080px)";
+
 $small-up: "screen and (min-width: 720px)";
 $small: "screen and (max-width: 720px)";
 $x-small: "screen and (max-width: 560px)";

assets/css/partials/_main-layout.scss

@@ -8,7 +8,6 @@ body{
 
     main{
         flex-grow: 1;
-        margin-top: var(--header-h);
         padding: 0 var(--padding-body);
     }
     

assets/css/partials/_site-header.scss

@@ -8,21 +8,26 @@
 }
 
 #site-header {
-  position: fixed;
+
-  left: var(--padding-body);
-  top: 0px;
   z-index: 900;
   --gap: 3ch;
 
-  width: calc(100vw - var(--padding-body)*2);
+  width: 100vw;
   height: var(--header-h);
   background-color: var(--color-bg);
-  // border-bottom: var(--border-light);
+  padding: 0 var(--padding-body);
+
+  .site-header__inner{
+    width: 100%;
+    height: 100%;
+    border-bottom: var(--border-light);
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--gap);
+  }
 
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--gap);
 
   a{
     text-decoration: none;
@@ -71,3 +76,13 @@
   }
 
 }
+
+
+#site-header.is-visible{
+  position: fixed;
+  top: 0;
+
+  & ~ main{
+    margin-top: var(--header-h);
+  }
+}

assets/css/style.css

@@ -100,14 +100,17 @@ body {
   }
 }
 #site-header {
-  position: fixed;
-  left: var(--padding-body);
-  top: 0px;
   z-index: 900;
   --gap: 3ch;
-  width: calc(100vw - var(--padding-body) * 2);
+  width: 100vw;
   height: var(--header-h);
   background-color: var(--color-bg);
+  padding: 0 var(--padding-body);
+}
+#site-header .site-header__inner {
+  width: 100%;
+  height: 100%;
+  border-bottom: var(--border-light);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -152,6 +155,14 @@ body {
   fill: var(--grey-200) !important;
 }
 
+#site-header.is-visible {
+  position: fixed;
+  top: 0;
+}
+#site-header.is-visible ~ main {
+  margin-top: var(--header-h);
+}
+
 button {
   cursor: pointer;
   font-family: var(--font);
@@ -540,14 +551,17 @@ button:disabled {
   }
 }
 #site-header {
-  position: fixed;
-  left: var(--padding-body);
-  top: 0px;
   z-index: 900;
   --gap: 3ch;
-  width: calc(100vw - var(--padding-body) * 2);
+  width: 100vw;
   height: var(--header-h);
   background-color: var(--color-bg);
+  padding: 0 var(--padding-body);
+}
+#site-header .site-header__inner {
+  width: 100%;
+  height: 100%;
+  border-bottom: var(--border-light);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -592,6 +606,14 @@ button:disabled {
   fill: var(--grey-200) !important;
 }
 
+#site-header.is-visible {
+  position: fixed;
+  top: 0;
+}
+#site-header.is-visible ~ main {
+  margin-top: var(--header-h);
+}
+
 #site-menu {
   position: fixed;
   width: var(--menu-w);
@@ -774,7 +796,6 @@ body {
 }
 body main {
   flex-grow: 1;
-  margin-top: var(--header-h);
   padding: 0 var(--padding-body);
 }
 
@@ -803,23 +824,23 @@ body main {
   font-size: var(--fs-medium);
   margin-bottom: calc(var(--spacing) * 1);
 }
-.page-enquete .hero {
+.page-enquete #hero {
   width: 100vw;
   position: relative;
   left: calc(var(--padding-body) * -1);
   margin: calc(var(--spacing) * 3) 0;
 }
-.page-enquete .hero figcaption {
+.page-enquete #hero figcaption {
   color: var(--color-txt-light);
   font-size: var(--fs-small);
   max-width: var(--max-w-content);
   margin: 0 auto;
   padding-top: calc(var(--spacing) * 0.5);
 }
-.page-enquete .hero.hero-video figure {
+.page-enquete #hero.hero-video figure {
   width: 100%;
 }
-.page-enquete .hero.hero-video figure img {
+.page-enquete #hero.hero-video figure img {
   width: 100%;
   aspect-ratio: 16/9;
   -o-object-fit: cover;

assets/css/template/_page-enquete.scss

@@ -33,7 +33,7 @@
 
     // HER0 ----------------------------------------------------
 
-    .hero{
+    #hero{
         width: 100vw;
         position: relative;
         left: calc(var(--padding-body)*-1);

assets/js/header.js

@@ -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
+}
+

assets/js/onload.js

@@ -1,8 +1,10 @@
-// TEMP, with includeHTML() --------------------------------------
+import { headerToggle, headerScrollVisibility } from './header.js';
+
+// TEMP, with includeHTML() --------------------------------------
 
 window.onload = async function () {
-  await runIncludeHTML();   
+  await runIncludeHTML();
-  initAfterLoad();         
+  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");
-  });
-}
-

components/site-header.html

@@ -1,4 +1,6 @@
 
+<div class="site-header__inner">
+
 <h1 id="site-title">
     <a
     href="https://www.index.ngo/"
@@ -36,4 +38,6 @@
 <button id="menu-toggle">
     <span class="open" w3-include-html="/assets/icons/menu.svg"></span>
     <span class="close" w3-include-html="/assets/icons/menu-close.svg"></span>
-</button>
+</button>
+
+</div>

index.html

@@ -6,7 +6,7 @@
     <title>INDEX</title>
     <link rel="icon" type="image/png" href="/assets/favicon.png" />
     <script src="/assets/js/temp/includeHtml.js"></script>
-    <script src="/assets/js/onload.js"></script>
+    <script src="assets/js/onload.js" type="module"></script>
     <link rel="stylesheet" type="text/css" href="/assets/fonts/stylesheet.css">
     <link rel="stylesheet" type="text/css" href="/assets/css/style.css">
 </head>

page-enquete/index.html

@@ -6,7 +6,7 @@
     <title>INDEX</title>
     <link rel="icon" type="image/png" href="/assets/favicon.png" />
     <script src="/assets/js/temp/includeHtml.js"></script>
-    <script src="/assets/js/onload.js"></script>
+    <script src="assets/js/onload.js" type="module"></script>
     <link rel="stylesheet" type="text/css" href="/assets/fonts/stylesheet.css">
     <link rel="stylesheet" type="text/css" href="/assets/css/style.css">
 </head>
@@ -23,7 +23,7 @@
             <p class="date-publish"></p>
         </header>
 
-            <div class="hero hero-video">
+            <div id="hero" class="hero-video">
                 <figure>
                     <img src="/assets/images/Nidal-Khaled-Amirah.png">
                 </figure>