{"id":13938028,"url":"https://github.com/potato4d/vue-fixed-header","last_synced_at":"2025-04-08T09:08:43.881Z","repository":{"id":38205999,"uuid":"115809647","full_name":"potato4d/vue-fixed-header","owner":"potato4d","description":"Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript.","archived":false,"fork":false,"pushed_at":"2025-04-07T07:39:12.000Z","size":9685,"stargazers_count":167,"open_issues_count":17,"forks_count":15,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T08:30:48.520Z","etag":null,"topics":["javascript","vue","vue-components"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/potato4d.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-30T16:42:38.000Z","updated_at":"2025-01-27T04:57:52.000Z","dependencies_parsed_at":"2024-01-02T10:48:18.808Z","dependency_job_id":"f3a07859-9ada-4f24-9bb7-b6720b15ca87","html_url":"https://github.com/potato4d/vue-fixed-header","commit_stats":{"total_commits":633,"total_committers":13,"mean_commits":48.69230769230769,"dds":0.5734597156398105,"last_synced_commit":"99bb0ec23edc68071eb9c5dd9c6d4ce2ce0ec126"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potato4d%2Fvue-fixed-header","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potato4d%2Fvue-fixed-header/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potato4d%2Fvue-fixed-header/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potato4d%2Fvue-fixed-header/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/potato4d","download_url":"https://codeload.github.com/potato4d/vue-fixed-header/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247809962,"owners_count":20999816,"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":["javascript","vue","vue-components"],"created_at":"2024-08-07T23:04:10.899Z","updated_at":"2025-04-08T09:08:43.854Z","avatar_url":"https://github.com/potato4d.png","language":"Vue","funding_links":["https://patreon.com/egoist"],"categories":["Vue","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Miscellaneous"],"readme":"# Vue Fixed Header\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square)](https://opensource.org/licences/MIT)\n[![NPM version](https://img.shields.io/npm/v/vue-fixed-header.svg?style=flat-square)](https://npmjs.com/package/vue-fixed-header)\n[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors)\n[![NPM downloads](https://img.shields.io/npm/dm/vue-fixed-header.svg?style=flat-square)](https://npmjs.com/package/vue-fixed-header)\n[![codecov](https://codecov.io/gh/potato4d/vue-fixed-header/branch/master/graph/badge.svg)](https://codecov.io/gh/potato4d/vue-fixed-header)\n\nSimple and cross-browser friendly fixed header component for Vue.js.\n\n[![Image from Gyazo](https://i.gyazo.com/2511ffaabd325f76c8fe9343ba07fdcc.gif)](https://gyazo.com/2511ffaabd325f76c8fe9343ba07fdcc)\n\n[![Edit vue-fixed-header demo](https://codesandbox.io/static/img/play-codesandbox.svg?style=flat-square)](https://codesandbox.io/s/yvjoj937x1?fontsize=14)\n\n## Install\n\n```bash\nyarn add vue-fixed-header\n```\n\n## Usage\n\n### Use in Single File Component\n\n```html\n\u003ctemplate\u003e\n  \u003cfixed-header\u003e\n    \u003cdiv class=\"navbar\"\u003e\n      Your Content\n    \u003c/div\u003e\n  \u003c/fixed-header\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport FixedHeader from 'vue-fixed-header'\n\nexport default {\n  components: {\n    FixedHeader\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.navbar.vue-fixed-header--isFixed {\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100vw;\n}\n\u003c/style\u003e\n```\n\n### Attach classes\n\nThe Vue Fixed Header always assigns the `vue-fixed-header` CSS class to the slot's root element.\nAlso, when matching the fixed condition, we give the `vue-fixed-header--isFixed` CSS class.\nThese can also be changed with headerClass prop and fixedClass prop.\n\n## Props\n\n### threshold: number\n\nThe threshold value for determining the scroll state.\n\n```html\n\u003ctemplate\u003e\n  \u003cfixed-header :threshold=\"100\"\u003e\n    \u003cdiv class=\"navbar\"\u003e\n      Your Content\n    \u003c/div\u003e\n  \u003c/fixed-header\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport FixedHeader from 'vue-fixed-header'\n\nexport default {\n  components: {\n    FixedHeader\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.navbar.vue-fixed-header--isFixed {\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100vw;\n}\n\u003c/style\u003e\n```\n\n### headerClass\n\nCSS class for fixed-header root Element.\nIt is always attached to fixed header root Element.\n\n- type: String,\n- required: false\n- default: 'vue-fixed-header'\n\n### fixedClass\n\nCSS class for fixed header.\nWhen fixed-header position is relative, it removed to DOM Element.\nWhen fixed-header position is fixed, it added to DOM Element.\n\n- type: String\n- required: false\n- default: 'vue-fixed-header--isFixed'\n\n## License\n\nMIT \u0026copy; [potato4d](https://github.com/potato4d)\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://potato4d.me\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/6993514?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHANATANI Takuma\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/potato4d/vue-fixed-header/commits?author=potato4d\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/potato4d/vue-fixed-header/issues?q=author%3Apotato4d\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/potato4d/vue-fixed-header/commits?author=potato4d\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-potato4d\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#question-potato4d\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e \u003ca href=\"https://github.com/potato4d/vue-fixed-header/pulls?q=is%3Apr+reviewed-by%3Apotato4d\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://patreon.com/egoist\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/8784712?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEGOIST\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#tool-egoist\" title=\"Tools\"\u003e🔧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://kavalcante.com\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/13931503?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJohnny Cavalcante\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/potato4d/vue-fixed-header/issues?q=author%3Akavalcante\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.jamesandrewwright.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/3672769?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJames Wright\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/potato4d/vue-fixed-header/issues?q=author%3Ajamesgfc\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://twitter.com/sbentifraouine\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/19405039?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSid\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/potato4d/vue-fixed-header/commits?author=sidbentifraouine\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://lenyeg.com.br\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/1340508?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndré Van Dal\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/potato4d/vue-fixed-header/commits?author=derevandal\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/birdspider\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/370960?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePatrik\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/potato4d/vue-fixed-header/issues?q=author%3Abirdspider\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpotato4d%2Fvue-fixed-header","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpotato4d%2Fvue-fixed-header","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpotato4d%2Fvue-fixed-header/lists"}