https://github.com/sectsect/solid-hiding-header

SolidJS header that disappears on scroll down and appears on scroll up.
https://github.com/sectsect/solid-hiding-header

solid-js solidjs sticky-headers typescript

Last synced: about 2 months ago
JSON representation

SolidJS header that disappears on scroll down and appears on scroll up.

• Host: GitHub
• URL: https://github.com/sectsect/solid-hiding-header
• Owner: sectsect
• License: mit
• Created: 2023-01-09T14:09:56.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-12-13T06:30:11.000Z (5 months ago)
• Last Synced: 2026-01-30T12:40:05.525Z (4 months ago)
• Topics: solid-js, solidjs, sticky-headers, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@sect/solid-hiding-header
• Size: 1.48 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  



# @sect/solid-hiding-header

[![Release](https://github.com/sectsect/solid-hiding-header/actions/workflows/release.yml/badge.svg)](https://github.com/sectsect/solid-hiding-header/actions/workflows/release.yml) [![codecov](https://codecov.io/gh/sectsect/solid-hiding-header/branch/main/graph/badge.svg?token=JKS41JGTAV)](https://codecov.io/gh/sectsect/solid-hiding-header) [![CodeQL](https://github.com/sectsect/solid-hiding-header/actions/workflows/github-code-scanning/codeql/badge.svg)](https://github.com/sectsect/solid-hiding-header/actions/workflows/github-code-scanning/codeql) [![npm version](https://badge.fury.io/js/@sect%2Fsolid-hiding-header.svg)](https://badge.fury.io/js/@sect%2Fsolid-hiding-header) ![NPM](https://img.shields.io/npm/l/@sect/solid-hiding-header)

A port of [Hiding Header React](https://github.com/FilipChalupa/hiding-header-react) by [Filip Chalupa](https://github.com/FilipChalupa).

## Demo

Toggles header visibility on scroll. [Demo](https://filipchalupa.cz/hiding-header/demo).

![UI example](https://raw.githubusercontent.com/FilipChalupa/hiding-header/HEAD/screencast.gif)

## Quick start

Install it:

```bash

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

```tsx

import { HidingHeader } from '@sect/solid-hiding-header';

const Header: Component = () => {

  return (

    

      

        


          Put your content here

        

      

    

  );

};

```


### Allow Top Level HTML `` tag

```tsx

const Header: Component = () => {

  return (

    

      


        Put your content here

      

    

  );

};

```


See Core API docs for more options.  

https://github.com/FilipChalupa/hiding-header/blob/main/README.md

## Changelog 

See [CHANGELOG](https://github.com/sectsect/solid-hiding-header/blob/master/CHANGELOG.md) file.

## License

See [LICENSE](https://github.com/sectsect/solid-hiding-header/blob/main/LICENSE) file.

✌️



A little project by @sectsect