Previous
Navbar Sticky
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.
import { Navbar } from "@overdog/fn"
new Navbar("#navbar-hidden", {
scrollTopDistance: 20,
behavior: "hidden"
}).init()
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] &")
})
]
}
<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>