@sect/solid-hiding-header
v2.0.23
Published
SolidJS header that disappears on scroll down and appears on scroll up.
Downloads
7
Maintainers
Readme
@sect/solid-hiding-header
Forked from Hiding Header React by Filip Chalupa.
Demo
Toggles header visibility on scroll. Demo.
Quick start
Install it:
npm i @sect/solid-hiding-header
# or
yarn add @sect/solid-hiding-header
# or
pnpm add @sect/solid-hiding-header
CSS:
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.
Usage Example
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
Changelog
See CHANGELOG file.
License
See LICENSE file.