💄 ajout du sticky header

Author: mckenziearts

public/css/app.css

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=1d8832a55a90910e91ad",
-    "/css/app.css": "/css/app.css?id=543449437fc1da0337d7"
+    "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css"
 }

public/js/app.js

@@ -11,8 +11,9 @@
 @import "forms.css";
 @import "torchlight.css";
 @import "toc.css";
-@import "media-library.css";
-/*@import "rain.css";*/
+@import "rain.css";
+@import "header.css";
+/*@import "media-library.css";*/
 /*@import "christmas.css";*/
 
 :root {

public/mix-manifest.json

@@ -0,0 +1,7 @@
+.header.is-fixed {
+  @apply fixed inset-x-0 transform duration-300 bg-skin-menu/80 backdrop-blur;
+}
+
+.header.is-hidden {
+  transform: translateY(-100%);
+}

resources/css/app.css

@@ -4,6 +4,7 @@
   width: 100%;
   height: 100%;
   z-index: 2;
+  pointer-events: none;
 }
 
 .rain.back-row {

resources/css/header.css

@@ -2,12 +2,15 @@ import Alpine from 'alpinejs'
 import intersect from '@alpinejs/intersect'
 
 import internationalNumber from './plugins/internationalNumber'
+import { registerHeader } from './header'
 import './elements'
 import './helpers'
 import './editor'
 import './scrollspy'
 // import './rain'
 
+registerHeader()
+
 // Add Alpine to window object.
 window.Alpine = Alpine;
 

resources/css/rain.css

@@ -0,0 +1,82 @@
+import { throttle } from '@helpers/timers'
+
+let $header = document.querySelector('.header')
+let currentTop = 0
+let previousTop = 0
+let scrolling = false
+const scrollDelta = 20
+let scrollOffset = $header ? $header.offsetHeight : 0
+
+// Les différents états possible du header
+const FIXED = 0
+const HIDDEN = 1
+const DEFAULT = 2
+let state = DEFAULT
+
+/**
+ * Fonction de changement d'état du header
+ *
+ * @param {number} newState
+ */
+function setState (newState) {
+  // Le header n'a pas changé d'état
+  if (newState === state) {
+    return
+  }
+
+  if (newState === HIDDEN) {
+    $header.classList.add('is-hidden')
+  } else if (newState === FIXED) {
+    $header.classList.remove('is-hidden')
+    $header.classList.add('is-fixed')
+  } else if (newState === DEFAULT) {
+    $header.classList.remove('is-hidden')
+    $header.classList.remove('is-fixed')
+  }
+
+  state = newState
+}
+
+const autoHideHeader = function () {
+  if (!$header) {
+    return
+  }
+  currentTop = document.documentElement.scrollTop
+  // Opacité sur le header
+  if (currentTop > $header.offsetHeight) {
+    if (currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
+      setState(HIDDEN)
+    } else if (previousTop - currentTop > scrollDelta) {
+      setState(FIXED)
+    }
+  } else {
+    setState(DEFAULT)
+  }
+  /**
+   // Masquage / affichage
+   if (previousTop - currentTop > scrollDelta) {
+    $header.classList.remove('is-hidden')
+  } else if (currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
+    $header.classList.add('is-hidden')
+  }
+   **/
+  previousTop = currentTop
+  scrolling = false
+}
+
+/**
+ * Enregistre le comportement du header (fixed au scoll)
+ * @return {function(): void}
+ */
+export function registerHeader () {
+  const scrollListener = throttle(() => {
+    if (!scrolling) {
+      scrolling = true
+      window.requestAnimationFrame(autoHideHeader)
+    }
+  }, 100)
+  window.addEventListener('scroll', scrollListener)
+  return () => {
+    window.removeEventListener('scroll', scrollListener)
+  }
+}

resources/js/app.js

@@ -0,0 +1,23 @@
+/**
+ * Throttle un callback
+ */
+export function throttle(callback, delay) {
+  let last;
+  let timer;
+  return function () {
+    let context = this;
+    let now = new Date();
+    let args = arguments;
+    if (last && now < last + delay) {
+      // le délai n'est pas écoulé on reset le timer
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        last = now;
+        callback.apply(context, args);
+      }, delay);
+    } else {
+      last = now;
+      callback.apply(context, args);
+    }
+  };
+}

resources/js/header.js

@@ -1,4 +1,4 @@
-<nav x-data="{ open: false, flyoutMenu: false }" class="relative z-10 bg-skin-menu">
+<nav x-data="{ open: false, flyoutMenu: false }" class="relative z-10 bg-skin-menu header">
     <div class="max-w-7xl mx-auto px-2 sm:px-4">
         <div class="flex justify-between h-16">
             <div class="flex px-2 lg:px-0">