- Notifications
You must be signed in to change notification settings - Fork4
🔥 Turn your boring fixed header into a smart one with three lines of code.
License
smastrom/vue-use-fixed-header
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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
pnpm add vue-use-fixed-header
yarn add vue-use-fixed-header
npm i vue-use-fixed-header
Pass your header's template ref touseFixedHeader. Then apply the returned reactive styles. That's it.
<script setup>import {ref }from'vue'import {useFixedHeader }from'vue-use-fixed-header'constheaderRef=ref(null)const {styles }=useFixedHeader(headerRef)</script><template> <headerclass="Header"ref="headerRef":style="styles"><!-- Your content--> </header></template><style scoped>.Header {position:fixed;/* or sticky*/top:0;/* Other styles...*/}</style>
All you have to do is to setposition: fixed (orsticky) to your header.useFixedHeader will take care of the rest.
On resize,useFixedHeader checks your header'sposition anddisplay 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:
.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 thewatch property ofuseFixedHeader to perform a check everytime the value changes:
<script setup>constroute=useRoute()constheaderRef=ref(null)constisPricingPage=computed(()=>route.name==='Pricing')const { styles } =useFixedHeader(headerRef, { watch: isPricingPage,// Will perform a check everytime the value changes})</script><template> <headerref="headerRef":style="{ ...styles, position: isPricingPage ? 'relative' : 'fixed', }" ><!-- Your content--> </header></template>
useFixedHeader will automatically toggle functionalities when navigating to/from thePricing page.
You can pass either a
refor acomputed(without.value).
declarefunctionuseFixedHeader(target:Ref<HTMLElement|null>|HTMLElement|nulloptions?:UseFixedHeaderOptions):{styles:Readonly<ShallowRef<CSSProperties>>isEnter:ComputedRef<boolean>isLeave:ComputedRef<boolean>}interfaceUseFixedHeaderOptions{/** * Scrolling container. Matches `document.documentElement` if `null`. * *@default null */root:Ref<HTMLElement|null>|HTMLElement|null/** * Signal without `.value` (ref or computed) to be watched * for automatic behavior toggling. * *@default null */watch:Ref<T>|ComputedRef<T>/** * Whether to transition `opacity` property from 0 to 1 * and vice versa along with the `transform` property * *@default false */transitionOpacity:boolean|Ref<boolean>|ComputedRef<boolean>}
MIT Licensed - Simone Mastromattei © 2023
About
🔥 Turn your boring fixed header into a smart one with three lines of code.
Topics
Resources
License
Code of conduct
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.