{"id":15046862,"url":"https://github.com/craftkit/craft-widget-stickyheadernavi","last_synced_at":"2026-03-04T22:31:09.377Z","repository":{"id":57104261,"uuid":"231194336","full_name":"craftkit/craft-widget-stickyheadernavi","owner":"craftkit","description":"Sticky header navigation system with parallax scrolling effect, for both browser and PWA.","archived":false,"fork":false,"pushed_at":"2020-09-10T08:56:32.000Z","size":216,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-22T09:39:53.661Z","etag":null,"topics":["javascript-framework","javascript-library","parallax-scrolling","progressive-web-app","shodow-dom","single-page-applications","ui-components","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/craftkit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-01T08:55:17.000Z","updated_at":"2022-05-12T05:53:13.000Z","dependencies_parsed_at":"2022-08-20T17:10:48.859Z","dependency_job_id":null,"html_url":"https://github.com/craftkit/craft-widget-stickyheadernavi","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftkit%2Fcraft-widget-stickyheadernavi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftkit%2Fcraft-widget-stickyheadernavi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftkit%2Fcraft-widget-stickyheadernavi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftkit%2Fcraft-widget-stickyheadernavi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/craftkit","download_url":"https://codeload.github.com/craftkit/craft-widget-stickyheadernavi/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241570921,"owners_count":19984002,"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-framework","javascript-library","parallax-scrolling","progressive-web-app","shodow-dom","single-page-applications","ui-components","webcomponents"],"created_at":"2024-09-24T20:53:40.384Z","updated_at":"2025-11-28T22:05:20.596Z","avatar_url":"https://github.com/craftkit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Craft-Widget-StickyHeaderNavi\n\nSticky header navigation system with parallax scrolling effect, for both browser and PWA.\n\nTry online tutorial:  \n[https://github.com/craftkit/craftkit-playground](https://github.com/craftkit/craftkit-playground)\n\n## Feature\n\n* Sticky header shrinked by scroll\n* Back button for standalone mode (web app added to the home screen)\n* Support for safe-area-inset-*\n* Depends on Craft-UIKit.\n\n\n## How to use\n\nDirect use:\n\n```html \n\u003cscript src=\"https://unpkg.com/@craftkit/craft-uikit/dist/craft-uikit.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/@craftkit/craft-widget-stickyheadernavi/dist/craft-widget-stickyheadernavi.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    window.onload = function(){\n        Craft.Core.Bootstrap.boot(App);\n    };\n\u003c/script\u003e\n```\n\nor webpack style:\n\n```javascript \nimport * as Craft from '@craftkit/craft-uikit';\nimport * as StickyHeaderNavi from '@craftkit/craft-widget-stickyheadernavi';\n\nCraft.usePackage(StickyHeaderNavi);\n\nexport class PageController extends Craft.Widget.StickyHeaderNavi.ViewController { ... }\n```\n\n\n## How to implement your Header\n\nHeader constructor requires 2 element, one is Large view, one is Small view.\nHeader starts in Large view, and when you scrolled over `Sticky threshold`, Small View is shown.\n\nYou can implement your Header as a sub-class of `Craft.Widget.StickyHeaderNavi.Header` abstruct class.\n\n``` \nclass MyHeader extends Craft.Widget.StickyHeaderNavi.Header {}\n\nlet header = new MyHeader({\n    large : new LargeTitle(),\n    small : new SmallTitle()\n}),\n``` \n\nThe abstruct class implements several interface to support sticky behaviour with some restriction. \nYou have to define `height` of your Large View and Small View in its style for `.root` class element. \nBecause the Small View (or sometimes Large View if in the state of scrolled) is not in the DOM until it enabled. \n\nlike this:\n\n``` \nclass Title extends Craft.UI.View { ... }\n\nclass LargeTitle extends Title {\n    style(componentId){\n        return super.style(componentId) + `\n            .root { height: 88px; }\n        `;\n    }\n}\nclass SmallTitle extends Title {\n    style(componentId){\n        return super.style(componentId) + `\n            .root { height: 44px; }\n        `;\n    }\n}\n``` \n\nIf you want to make dynamically rendered Large and Small View, you have to override below method. \nSee JSDoc comment for details.\n\n| Item             | Method             | Description |\n|:-----------------|:-------------------|:------------|\n| Large height     | getLargeHeight     | The height of large view should be defined in its root style. |\n| Small height     | getSmallHeight     | The height of small view should be defined in its root style. |\n| Sticky threshold | getStickyThreshold | Threshold of scroll amount to make header sticky |\n\n\n## Events your header may handle\n\n| Event                 | Description |\n|:----------------------|:-------------------------------------------------|\n| onEnterSticky         | called when the page scrolled to `sticky height`.\u003cbr\u003eBy default, when scrolled over `sticky` amount, large view is hidden and small view is shown. | \n| onExitSticky          | called when the page scroll backed to top area\u003cbr\u003eBy default, when scroll back to top area less than `sticky height`, large view is shown and small view is hidden. | \n| onAppearBackButton    | called when the back button appeared\u003cbr\u003eBy default, both large and small view will slide out 44px (defined in `.slide_out` css class). | \n| onDisappearBackButton | called when the back button disappeared\u003cbr\u003eBy default, both large and small view will turn back to the original position (defined in `.slide_in` css class). | \n\n\n## License\n\nMIT\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraftkit%2Fcraft-widget-stickyheadernavi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcraftkit%2Fcraft-widget-stickyheadernavi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraftkit%2Fcraft-widget-stickyheadernavi/lists"}