Skip to main content

Navbar Sticky

Une navbar sticky utilisant requestAnimationFrame

Installation

Importez la fonction dans votre projet

import { Navbar } from "@overdog/fn"

Créez et initialisez une instance

new Navbar("#navbar-sticky", {
   behavior: "sticky"
}).init()

Ajoutez les variants Tailwind dans la section plugins de votre fichier de config

Note : si vous utilisez plusieurs éléments de Overdog FN qui nécessitent les mêmes variants, vous les ajoutez seulement une fois.

module.exports = {
   // ...
   plugins: [
      plugin(function ({ addVariant }) {
         addVariant("is-open", "&[data-fn-is-open]")
         addVariant("parent-is-open", "[data-fn-is-open] &")
      })
   ]
}

Twig template Code

<div 
   id="navbar-sticky"
   class="fixed w-full h-[60px] z-30 top-0 border-b border-[#e3e3e3]"
>
      <div {# background div for sticky - better performance than bg-color change #}
      class="opacity-0 h-full w-full absolute top-0 left-0 bg-white/80 transition-opacity 
      parent-is-open:opacity-100"
      >
   </div>
</div>

Options