https://github.com/bkwld/vue-detachable-header
Vue component that wraps your header and renders at the top of the viewport when scrolling up.
https://github.com/bkwld/vue-detachable-header
Last synced: 6 days ago
JSON representation
Vue component that wraps your header and renders at the top of the viewport when scrolling up.
- Host: GitHub
- URL: https://github.com/bkwld/vue-detachable-header
- Owner: BKWLD
- Created: 2021-03-02T06:39:50.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-10-13T17:56:23.000Z (almost 4 years ago)
- Last Synced: 2025-10-11T08:17:51.429Z (10 months ago)
- Language: JavaScript
- Size: 81.1 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-detachable-header
Wrap your header in this to get it to reveal itself in a detached state on scroll up. Elegantly handles the transition back to a docked state on scroll back to top.
## Usage
```js
import Vue from 'vue'
import DetachableHeader from 'vue-detachable-header'
import 'vue-detachable-header/index.css'
Vue.component('detachable-header', DetachableHeader)
```
```html
...
```
```css
.desktop-header {
/* Fill the height of the detachable-header */
height: 100%;
/* Make the header text white at the top of the page */
color: white;
background: transparent;
}
/* Switch to inverterd styling when detached */
.show-background .desktop-header {
color: black;
background: white;
}
```
## Props
| Name | Default | Description |
| ---- | ------- | ----------- |
| `height` | `undefined` | The height of the header as an integer. |
| `offset` | `0` | Adjusts the `top` of the header by this amount when at the top of the page. Useful when the site has a notification bar above the header; you would set this value to the height of the notification bar. |
| `no-offset-when-detached` | `false` | When `false`, if there is an offset, the header respects the `offset` when detached (aka, when you have scrolled down the page a ways and then scrolled back up). This is useful for notification bars that don't hide on scrol. When `true`, the header has a `top` of `0` when it's detached. |
| `reveal-transition` | `"translate"` | How the header enters when detached. Supports "translate" and "fade". |
| `force-background` | `false` | Forces `show-background` class. |
| `force-reveal` | `false` | Forces reveal of detached state. |
| `scroll` | `undefined` | Manually pass in the current scroll value. This could be useful when used with a smooth scrolling library. |
| `offscreen-height` | `0` | Sets the offscreen height to account for headers that may have overflow on the lower edge |