@sect/solid-hiding-header
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>
);
};
Allow Top Level HTML <header> tag
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