{"id":20837487,"url":"https://github.com/jd1378/vue-sticky-element","last_synced_at":"2025-07-16T13:05:57.761Z","repository":{"id":41325505,"uuid":"256480559","full_name":"jd1378/vue-sticky-element","owner":"jd1378","description":"a sticky component that will stick to screen when scrolled past it","archived":false,"fork":false,"pushed_at":"2025-01-12T12:45:23.000Z","size":717,"stargazers_count":23,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-08T19:59:57.117Z","etag":null,"topics":["element","header","nav","navbar","scroll","sticky","vue","vue3"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-sticky-element","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/jd1378.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2020-04-17T11:09:08.000Z","updated_at":"2025-03-17T02:13:29.000Z","dependencies_parsed_at":"2024-07-28T20:08:39.288Z","dependency_job_id":"3f7591ca-a545-4c9b-a273-ddfd6e18bb00","html_url":"https://github.com/jd1378/vue-sticky-element","commit_stats":{"total_commits":52,"total_committers":4,"mean_commits":13.0,"dds":"0.34615384615384615","last_synced_commit":"51db58497ec08dfd954b730751602eb210a1d7e9"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd1378%2Fvue-sticky-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd1378%2Fvue-sticky-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd1378%2Fvue-sticky-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd1378%2Fvue-sticky-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jd1378","download_url":"https://codeload.github.com/jd1378/vue-sticky-element/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253141474,"owners_count":21860541,"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":["element","header","nav","navbar","scroll","sticky","vue","vue3"],"created_at":"2024-11-18T01:07:43.211Z","updated_at":"2025-05-08T20:01:37.651Z","avatar_url":"https://github.com/jd1378.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-sticky-element\n\nThis component can help you:\n\n- Create a navbar that will stick to screen when scrolled past it\n- Hide navbar when scrolling down and show it when scrolling back up\n- Handles common bug of touch screen causing navbar to rapidly show/hide when holding your finger on screen\n\nSupports both vue-2 and vue-3\n\n[![Edit vue-sticky-element example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-sticky-element-vue3-dzpd13?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Getting Started\n\n```bash\nnpm install vue-sticky-element\n# or \nyarn add vue-sticky-element\n```\n\nThen add it to your vue application:\n\n```js\n// add it to your vue application:\nimport StickyElement from 'vue-sticky-element';\nimport 'vue-sticky-element/css'; // this is required for default styles to work.\n\nexport default {\n  components: {\n    StickyElement\n  }\n}\n\n// or you can use the .vue import:\nimport StickyElement from 'vue-sticky-element/vue';\n```\n\nThen use it:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv \u003e \n    \u003c!-- \n      .\n      .\n      .\n     --\u003e\n     \u003cStickyElement\u003e \n       \u003cNav\u003e...\u003c/Nav\u003e\n     \u003c/StickyElement\u003e\n    \n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Default behaviour\n\nThis component wraps the default slot of it with a fixed height div and makes the element stick to top of screen (out of view) using `position: fixed` whenever user scrolls past the element completely. then shows the element again if the user scrolls up a bit (adjustable by `scrollBackThreshold`) with a fast transition.\n\nIf you want to change the default behaviour use the following properties\n\n## properties\n\n### `visibleOnDirection` - ['up','down','disabled'], default: 'up'\n\nShould the hidden sticky element come into view when scrolling which direction ? if 'disabled' is used, element is displayed all the time\n\n### `stickMode` - ['element-start', 'element-end'], default: 'element-end'\n\nShould the element stick when element is out of view completely or as soon as it reaches the top of screen ?\n\n### `stuckClass` - default: 'vue-sticky-element--stuck'\n\nThe class that is applied when the element is stuck\n\n### `showClass` - default: 'vue-sticky-element--show'\n\nThe class that is applied whenn the element should be moved into view (related to visibleOnDirection)\n\n### `transitionClass` - default: 'vue-sticky-element--transition'\n\nThe class that is applied whenn the element is being moved into or out of view\n\n### `transitionDuration` - default: 100\n\nThe transition duration of move transform. this is to wait before applying transition class, so the navbar doesn't glitch into screen when it's getting stuck.\nthis should be the same amount of your transition duration if a custom class is used instead of the default one. changing this does not change the speed of navbar transition.\n\n### `scrollBackThreshold` - default: 65\n\nWhen using this element as navbar, touch screen users will finding it very annoying when they hold their fingers on screen.\nbecause normally when you put your fingers on screen, it wobbles up and down, causing scroll to move up and down multiple times in a row.\nyou can adjust how much user has to scroll back (along the `visibleOnDirection`) for the element to show.\n\n### `skipChecks` - default: false\n\nWhen true, stops checking for scroll positions (essentially, does not do anything). this can help when you need to freeze and scroll the navbar.\n\n### `forceShow` - default: false\n\nForce applies the `showClass`.\n\n### `scrollElement` - default: undefined\n\nThe element to add `onscroll` event listener to instead of window. this is useful for native apps like ionic where scrolling element might not be window. this can be changed in runtime and the change will be detected, so for example you can get your element in `onMounted` [using `getScrollElement`](https://ionicframework.com/docs/api/content#getscrollelement) and you will be fine.\n\n## events\n\n### `stuck` - true | false\n\nWhen stuck state changes, emits the new value\n\n### `show` - true | false\n\nWhen show state changes, emits the new value\n\n## Credits\n\nSmall part of the codes used in this component were taken from [vue-fixed-header](https://www.npmjs.com/package/vue-fixed-header) and [this answer on stackoverflow](https://stackoverflow.com/questions/51065172/how-can-i-duplicate-slots-within-a-vuejs-render-function) with some edits\n\n---------------\n\n## Changelog\n\nCheck [CHANGELOG.md](https://github.com/jd1378/vue-sticky-element/blob/master/CHANGELOG.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjd1378%2Fvue-sticky-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjd1378%2Fvue-sticky-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjd1378%2Fvue-sticky-element/lists"}