Skip to main content
ST FN

Navbar Hidden

A hide and show navbar that utilizes requestAnimationFrame for optimal performance. A data attribute is added to the body, allowing you to style the navbar or other elements based on the scroll.

Demo

Installation

Import the function into the JavaScript file of your project

import { Navbar } from "@overdog/fn"

Create and initialize an instance

new Navbar("#navbar-hidden", {
   scrollTopDistance: 20,
   behavior: "hidden"
}).init()

Add the Tailwind variants to the plugins section of your config file.

If you are using multiple elements from Overdog FN that require the same variants, you only need to add them once. You can also modify the data attributes added to each function using the attributes parameter {}.

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="sticky w-full h-16 z-30 top-0 bg-blue-500 
   transition-transform duration-600
   is-open:-translate-y-16 is-open:duration-600">
</div>

Options