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
-
NameTypeDefaultDescription
-
scrollTopDistanceinteger80La distance du top à partir de laquelle la navbar sera sticky.
-
behavior"sticky" or "hidden""sticky"Voir les 2 démos pour la différence entre sticky et hidden