Skip to main content
ST FN

Navbar Sticky

A sticky 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. This way, you can create a navbar that shrinks, etc.

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-sticky", {
   behavior: "sticky"
}).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-sticky" class="sticky w-full h-16 z-30 top-0 border-b border-blue-500" >
   {# 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-blue-500 transition-opacity parent-is-open:opacity-100"></div>
</div>

Options