{"id":18054578,"url":"https://github.com/gpoitch/headspace","last_synced_at":"2025-10-12T01:48:57.962Z","repository":{"id":57152890,"uuid":"50538283","full_name":"gpoitch/headspace","owner":"gpoitch","description":"Next generation web header UX","archived":false,"fork":false,"pushed_at":"2018-05-25T00:59:48.000Z","size":10,"stargazers_count":31,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-22T01:22:58.053Z","etag":null,"topics":["header","headroom","headspace","scrolling","ux"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/gpoitch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-27T21:14:56.000Z","updated_at":"2025-03-10T19:33:01.000Z","dependencies_parsed_at":"2022-09-06T20:51:33.352Z","dependency_job_id":null,"html_url":"https://github.com/gpoitch/headspace","commit_stats":null,"previous_names":["gdub22/headspace"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gpoitch/headspace","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gpoitch%2Fheadspace","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gpoitch%2Fheadspace/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gpoitch%2Fheadspace/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gpoitch%2Fheadspace/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gpoitch","download_url":"https://codeload.github.com/gpoitch/headspace/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gpoitch%2Fheadspace/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279009796,"owners_count":26084648,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["header","headroom","headspace","scrolling","ux"],"created_at":"2024-10-31T00:11:51.085Z","updated_at":"2025-10-12T01:48:57.915Z","avatar_url":"https://github.com/gpoitch.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# headspace.js [![Build Status](https://travis-ci.org/gpoitch/headspace.svg)](https://travis-ci.org/gpoitch/headspace)\n\nNext generation web header UX.  This is similar to [headroom.js](https://github.com/WickyNilliams/headroom.js), but different in areas I believe could be improved:\n\n- Header initially scrolls naturally out of view as if it is static\n- Header reappears fixed when scrolling up, hides when scrolling back down (if greater that scroll tolerance)\n- Header can reappear when reaching bottom of the document\n- Header can reappear if hovering near the top\n- Interaction/tolerance should match closely to mobile safari's chrome\n- Minimal footprint, more opinionated\n\nSites like [medium.com](http://medium.com), [teehan + lax](http://www.teehanlax.com/) deploy a similar technique\n\n## Demo\n[demo.html](https://rawgit.com/gpoitch/headspace/master/demo.html)\n\n## Install\n```shell\nnpm install headspace --save\n```\n\n## Usage\n```js\n// Basic example:\nconst headspace = Headspace(document.querySelector('header'))\n\n// Advanced example with options:\nHeadspace(document.querySelector('header'), { // can use factory method or `new Headspace`\n  startOffset: 90,                            // default: height of element\n  tolerance: 5,                               // default: 8\n  showAtBottom: false,                        // default: true\n  classNames: {\n    base: 'custom',                           // default: 'headspace'\n    fixed: 'custom--fixed',                   // default: 'headspace--fixed'\n    hidden: 'custom--hidden'                  // default: 'headspace--hidden'\n  }\n})\n```\n**Base css:**\nTo get started quickly with the minimal amount of css, copy contents of `dist/headspace.css` to your project.  \n\n## Browser support\nOut of the box: Chrome 24+, Firefox 23+, Safari 7+, IE 10+  \nAKA browsers that natively support [classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) and [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) \n\nYou can globally pollyfill them if needed, otherwise the code is structured so you can manually shim-in support.  \n`Headroom.isSupported()` will check if it can be used out of the box on the current browser/environment\n\n## Build\n```shell\nnpm run build\n```\n\n## Test\n```shell\nnpm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgpoitch%2Fheadspace","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgpoitch%2Fheadspace","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgpoitch%2Fheadspace/lists"}