Release codecov CodeQL npm version NPM
A port of Hiding Header React by Filip Chalupa.
Toggles header visibility on scroll. Demo.
Install it:
npm i @sect/solid-hiding-header # or yarn add @sect/solid-hiding-header # or pnpm add @sect/solid-hiding-header
Import node_modules/hiding-header/dist/style.css to your CSS. It's few lines of code. You can alternatively copy paste it and adjust things like z-index to your needs.
import { HidingHeader } from '@sect/solid-hiding-header'; const Header: Component = () => { return ( <HidingHeader> <header class="py-5"> <div class="inner"> Put your content here </div> </header> </HidingHeader> ); };
const Header: Component = () => { return ( <HidingHeader component="header"> <div class="inner py-5"> Put your content here </div> </HidingHeader> ); };
See Core API docs for more options.
https://github.com/FilipChalupa/hiding-header/blob/main/README.md
See CHANGELOG file.
See LICENSE file.
✌️
A little project by @sectsect