Turn your boring fixed header into a smart one with three lines of code.
npm install vue-use-fixed-header!npm !dependency-count !GitHub Workflow Status !GitHub Workflow Status
Turn your boring fixed header into a smart one with three lines of code.
Demo: Website — Examples: Vue 3 - Nuxt 3
- Dead simple - Write three lines of code and you're ready to go
- Enjoyable - When scrolling down, the header is hidden, when scrolling up, the header is shown.
- Smart - Behaves as expected on page load, hovering, dropdown navigation, top-reached and reduced motion.
- Dynamic - Functionalities are automatically enabled/disabled if your header turns from fixed/sticky to something else or it is hidden at different viewports
- Flexible - Works with any scrolling container
``bash`
pnpm add vue-use-fixed-header
`bash`
yarn add vue-use-fixed-header
`bash`
npm i vue-use-fixed-header
Pass your header's template ref to useFixedHeader. Then apply the returned reactive styles. That's it.
`vue
`
All you have to do is to set position: fixed (or sticky) to your header. useFixedHeader will take care of the rest.
On resize, useFixedHeader checks your header's position and display properties to determine whether its functionalities should be enabled or not.
_Disabled_ means that no event listeners are attached and the returned styles match an empty object {}.
Hence feel free to have code like this, it will just work as expected:
`css
.Header {
position: fixed;
}
/ Will be disabled /
@media (max-width: 768px) {
.Header {
position: relative;
}
}
/ Same /
@media (max-width: 375px) {
.Header {
display: none;
}
}
`
Let's suppose your header in some pages is not fixed/sticky and you're using some reactive logic to determine whether it should be or not.
You can pass a signal to the watch property of useFixedHeader to perform a check everytime the value changes:
`vue
:style="{
...styles,
position: isPricingPage ? 'relative' : 'fixed',
}"
>
`
useFixedHeader will automatically toggle functionalities when navigating to/from the _Pricing_ page.
> You can pass either a ref or a computed (without .value).
`ts
declare function useFixedHeader(
target: Ref
options?: UseFixedHeaderOptions
): {
styles: Readonly
isEnter: ComputedRef
isLeave: ComputedRef
}
interface UseFixedHeaderOptions {
/**
* Scrolling container. Matches document.documentElement if null..value
*
* @default null
*/
root: Ref
/**
* Signal without (ref or computed) to be watchedopacity
* for automatic behavior toggling.
*
* @default null
*/
watch: Ref
/**
* Whether to transition property from 0 to 1transform
* and vice versa along with the property``
*
* @default false
*/
transitionOpacity: boolean | Ref
}
MIT Licensed - Simone Mastromattei © 2023