https://github.com/collardeau/svelte-headroom

A Svelte component to hide your header on scroll.
https://github.com/collardeau/svelte-headroom

headroom svelte svelte-component svelte3 sveltejs

Last synced: about 1 month ago
JSON representation

A Svelte component to hide your header on scroll.

• Host: GitHub
• URL: https://github.com/collardeau/svelte-headroom
• Owner: collardeau
• Created: 2019-09-30T12:45:47.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-02-02T16:44:10.000Z (almost 3 years ago)
• Last Synced: 2024-09-29T11:59:54.635Z (about 1 month ago)
• Topics: headroom, svelte, svelte-component, svelte3, sveltejs
• Language: HTML
• Homepage:
• Size: 18.6 KB
• Stars: 79
• Watchers: 4
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Svelte-Headroom

**Hide your header until you need it!**

Svelte Headroom is a [Svelte](https://svelte.dev) component to hide or show your header on scroll, inspired by [headroom.js](https://wicky.nillia.ms/headroom.js/)

`svelte-headroom` has **no dependencies**.

# Demo

[Code Sandbox](https://codesandbox.io/embed/svelte-headroom-demo-cf7lv)

# Install

`npm install svelte-headroom`

# Usage

```html

  import Headroom from "svelte-headroom";

  

```

# Props

### `offset` number

The number of pixels from the top of the page before the effect is allowed to occur. The default value is `0`.

```html

  

```

### `tolerance` number

The amount of pixels that need to be scrolled in either direction for the effect to occur. This is useful if you want the user to be able to scroll slowly and not change the header position. The default value is `0`.

```html

  

```

### `duration` string

The duration of the sliding effect. The value is passed on as a [CSS Transition Duration](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration). The default value is `"300ms"`.

```html

  

```

# Events

A `svelte-headroom` component emits two events: `pin` and `unpin`.

```jsx

 {} }

  on:unpin={ () => {} }

>

  My Header

```

Happy Coding!