@sect/solid-hiding-header

@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.

✌️

_{^{A little project by @sectsect}}