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]" >
   {# background div with opacity change - better performance than background-color change #}
   <div 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