{"id":17488509,"url":"https://github.com/smastrom/vue-use-fixed-header","last_synced_at":"2025-04-14T22:13:29.589Z","repository":{"id":180197053,"uuid":"664762047","full_name":"smastrom/vue-use-fixed-header","owner":"smastrom","description":"🔥 Turn your boring fixed header into a smart one with three lines of code.","archived":false,"fork":false,"pushed_at":"2024-02-05T19:02:59.000Z","size":204,"stargazers_count":63,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T22:13:14.278Z","etag":null,"topics":["fixed-header","nuxt","nuxt-3","use-fixed-header","vue","vue-3","vue-composable"],"latest_commit_sha":null,"homepage":"https://vue-use-fixed-header.pages.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smastrom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-07-10T17:31:12.000Z","updated_at":"2025-03-30T18:10:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"fad89e89-bca2-453b-a488-a6347eef5045","html_url":"https://github.com/smastrom/vue-use-fixed-header","commit_stats":null,"previous_names":["smastrom/vue-fixed"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Fvue-use-fixed-header","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Fvue-use-fixed-header/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Fvue-use-fixed-header/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Fvue-use-fixed-header/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smastrom","download_url":"https://codeload.github.com/smastrom/vue-use-fixed-header/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248968917,"owners_count":21191162,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fixed-header","nuxt","nuxt-3","use-fixed-header","vue","vue-3","vue-composable"],"created_at":"2024-10-19T04:08:12.572Z","updated_at":"2025-04-14T22:13:29.565Z","avatar_url":"https://github.com/smastrom.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"![npm](https://img.shields.io/npm/v/vue-use-fixed-header?color=46c119) ![dependency-count](https://img.shields.io/badge/dependencies-0-success) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/smastrom/vue-use-fixed-header/chrome-tests.yml?branch=main\u0026label=chrome) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/smastrom/vue-use-fixed-header/firefox-tests.yml?branch=main\u0026label=firefox)\n\n# Vue Use Fixed Header\n\nTurn your boring fixed header into a smart one with three lines of code.\n\n\u003cbr /\u003e\n\n**Demo:** [Website](https://vue-use-fixed-header.pages.dev/) — **Examples:** [Vue 3](https://stackblitz.com/edit/vitejs-vite-nc7ey2?file=index.html,src%2Fcomponents%2FPage.vue) - [Nuxt 3](https://stackblitz.com/edit/nuxt-starter-zbtjes?file=layouts%2Fdefault.vue)\n\n\u003cbr /\u003e\n\n## Features\n\n-  **Dead simple** - Write three lines of code and you're ready to go\n-  **Enjoyable** - When scrolling down, the header is hidden, when scrolling up, the header is shown.\n-  **Smart** - Behaves as expected on page load, hovering, dropdown navigation, top-reached and reduced motion.\n-  **Dynamic** - Functionalities are automatically enabled/disabled if your header turns from fixed/sticky to something else or it is hidden at different viewports\n-  **Flexible** - Works with any scrolling container\n\n\u003cbr /\u003e\n\n## Installation\n\n```bash\npnpm add vue-use-fixed-header\n```\n\n```bash\nyarn add vue-use-fixed-header\n```\n\n```bash\nnpm i vue-use-fixed-header\n```\n\n\u003cbr /\u003e\n\n## Usage\n\nPass your header's template ref to `useFixedHeader`. Then apply the returned reactive styles. That's it.\n\n```vue\n\u003cscript setup\u003e\nimport { ref } from 'vue'\nimport { useFixedHeader } from 'vue-use-fixed-header'\n\nconst headerRef = ref(null)\n\nconst { styles } = useFixedHeader(headerRef)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n   \u003cheader class=\"Header\" ref=\"headerRef\" :style=\"styles\"\u003e\n      \u003c!-- Your content --\u003e\n   \u003c/header\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\n.Header {\n   position: fixed; /* or sticky */\n   top: 0;\n   /* Other styles... */\n}\n\u003c/style\u003e\n```\n\nAll you have to do is to set `position: fixed` (or `sticky`) to your header. `useFixedHeader` will take care of the rest.\n\n\u003cbr /\u003e\n\n## Automatic behavior toggling\n\nOn resize, `useFixedHeader` checks your header's `position` and `display` properties to determine whether its functionalities should be enabled or not.\n\n_Disabled_ means that no event listeners are attached and the returned styles match an empty object `{}`.\n\n### Media queries\n\nHence feel free to have code like this, it will just work as expected:\n\n```css\n.Header {\n   position: fixed;\n}\n\n/* Will be disabled */\n@media (max-width: 768px) {\n   .Header {\n      position: relative;\n   }\n}\n\n/* Same */\n@media (max-width: 375px) {\n   .Header {\n      display: none;\n   }\n}\n```\n\n### Advanced scenarios\n\nLet'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.\n\nYou can pass a signal to the `watch` property of `useFixedHeader` to perform a check everytime the value changes:\n\n```vue\n\u003cscript setup\u003e\nconst route = useRoute()\n\nconst headerRef = ref(null)\n\nconst isPricingPage = computed(() =\u003e route.name === 'Pricing')\n\nconst { styles } = useFixedHeader(headerRef, {\n   watch: isPricingPage, // Will perform a check everytime the value changes\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n   \u003cheader\n      ref=\"headerRef\"\n      :style=\"{\n         ...styles,\n         position: isPricingPage ? 'relative' : 'fixed',\n      }\"\n   \u003e\n      \u003c!-- Your content --\u003e\n   \u003c/header\u003e\n\u003c/template\u003e\n```\n\n`useFixedHeader` will automatically toggle functionalities when navigating to/from the _Pricing_ page.\n\n\u003e You can pass either a `ref` or a `computed` (without `.value`).\n\n\u003cbr /\u003e\n\n## API\n\n```ts\ndeclare function useFixedHeader(\n   target: Ref\u003cHTMLElement | null\u003e | HTMLElement | null\n   options?: UseFixedHeaderOptions\n): {\n   styles: Readonly\u003cShallowRef\u003cCSSProperties\u003e\u003e\n   isEnter: ComputedRef\u003cboolean\u003e\n   isLeave: ComputedRef\u003cboolean\u003e\n}\n\ninterface UseFixedHeaderOptions {\n   /**\n    * Scrolling container. Matches `document.documentElement` if `null`.\n    *\n    * @default null\n    */\n   root: Ref\u003cHTMLElement | null\u003e | HTMLElement | null\n   /**\n    * Signal without `.value` (ref or computed) to be watched\n    * for automatic behavior toggling.\n    *\n    * @default null\n    */\n   watch: Ref\u003cT\u003e | ComputedRef\u003cT\u003e\n   /**\n    * Whether to transition `opacity` property from 0 to 1\n    * and vice versa along with the `transform` property\n    *\n    * @default false\n    */\n   transitionOpacity: boolean | Ref\u003cboolean\u003e | ComputedRef\u003cboolean\u003e\n}\n```\n\n\u003cbr /\u003e\n\n## License\n\nMIT Licensed - Simone Mastromattei © 2023\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmastrom%2Fvue-use-fixed-header","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmastrom%2Fvue-use-fixed-header","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmastrom%2Fvue-use-fixed-header/lists"}