Une navbar hide and show utilisant requestAnimationFrame
Installation
Importez la fonction dans votre projet
import { Navbar } from "@overdog/fn"
Créez et initialisez une instance - exemple
new Navbar("#navbar-hidden", {
scrollTopDistance: 20,
behavior: "hidden"
}).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-hidden"
class="fixed w-full h-[60px] z-30 top-0 border-b bg-white border-slate
transition-transform duration-600
is-open:-translate-y-[60px] is-open:duration-600">
</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