{"id":13802720,"url":"https://github.com/soenkekluth/sticky-state","last_synced_at":"2025-05-16T01:05:43.600Z","repository":{"id":57370915,"uuid":"53626965","full_name":"soenkekluth/sticky-state","owner":"soenkekluth","description":"StickyState is a high performant module making native position:sticky statefull and polyfilling the missing sticky browser feature","archived":false,"fork":false,"pushed_at":"2023-12-15T08:37:10.000Z","size":1111,"stargazers_count":675,"open_issues_count":9,"forks_count":31,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-08T12:29:05.275Z","etag":null,"topics":["classname","native","polyfill","position","scrolling","state","sticky","sticky-state","user-scrolls"],"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/soenkekluth.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-03-11T00:18:20.000Z","updated_at":"2025-02-28T03:02:51.000Z","dependencies_parsed_at":"2024-01-13T10:42:32.245Z","dependency_job_id":"be67ceda-ee4a-474a-9953-8f5e703d0bf1","html_url":"https://github.com/soenkekluth/sticky-state","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soenkekluth%2Fsticky-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soenkekluth%2Fsticky-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soenkekluth%2Fsticky-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soenkekluth%2Fsticky-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soenkekluth","download_url":"https://codeload.github.com/soenkekluth/sticky-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254448579,"owners_count":22072764,"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":["classname","native","polyfill","position","scrolling","state","sticky","sticky-state","user-scrolls"],"created_at":"2024-08-04T00:01:51.606Z","updated_at":"2025-05-16T01:05:38.588Z","avatar_url":"https://github.com/soenkekluth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#StickyState\n\nStickyState adds state to position:sticky elements and also polyfills the missing native sticky feature.\n\nDependency free, pure Javascript for IE9+.\n\nToday's browsers do not all support the position:sticky feature (which by the way is being used (polyfilled) on pretty much every site you visit) - moreover the native supported feature itself comes without a readable state. Something like `a:hover =\u003e div:sticky` to add different styles to the element in its sticky state - or to read the state if needed in JavaScript. \n\nUnlike almost all polyfills you can find in the wild, StickyState is highly performant. The calculations are reduced to a minimum by persisting several attributes.\n\nIn some cases you also need to know in which direction the user scrolls - for example if you want to hide a sticky header when the user scrolls up. if you set the scrollClass property of the options StickyState will add your choosen classNames to the element when it is sticky and scrolling.\n\nAs a standalone Library its 6.75kb gzipped. \n\n# Warning concerning Chromes implementation of native position:sticky\nit looks like chromes implementaton of position:sticky is different to all other implementations out there. don't know if thats a bug - but bottom is currently not recognized by chrome. there will be a fix for this soon in sticky-state \n\n### Dependencies\nnone!\n\n### Browser support\nIE \u003e= 9, *\n\n\u003cbr/\u003e\n\n### Install\n```\nnpm install sticky-state\n```\n\n\u003cbr/\u003e\n\n### Demo\n#### all you can eat\nhttps://rawgit.com/soenkekluth/sticky-state/master/examples/index.html\n\n#### headroom style\nhttps://rawgit.com/soenkekluth/sticky-state/master/examples/headroom.html\n\n#### simple\nhttps://rawgit.com/soenkekluth/sticky-state/master/examples/simple.html\n\n\u003cbr/\u003e\n\n### css\nYour css should contain the following lines: \n(you can specify the classNames in js)\nhttps://github.com/soenkekluth/sticky-state/blob/master/dist/sticky-state.css\n```css\n.sticky {\n  position: -webkit-sticky;\n  position: sticky;\n}\n\n.sticky.sticky-fixed.is-sticky {\n  position: fixed;\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  backface-visibility: hidden;\n}\n\n.sticky.sticky-fixed.is-sticky:not([style*=\"margin-top\"]) {\n  margin-top: 0 !important;\n}\n.sticky.sticky-fixed.is-sticky:not([style*=\"margin-bottom\"]) {\n  margin-bottom: 0 !important;\n}\n\n.sticky.sticky-fixed.is-absolute{\n  position: absolute;\n}\n\n```\n\u003cbr/\u003e\n\n### js\n```javascript\nvar StickyState = require('sticky-state');\nnew StickyState(document.querySelectorAll('.sticky'));\n//  all elements with class .sticky will have sticky state:\n```\n\n#### options\n```javascript\n\nvar StickyState = require('sticky-state');\n\n// the props you can set (except scrollClass this shows the default options):\n\n\n\nvar stickyOptions = {\n  disabled: false, // disable or enable the sticky feature initially\n  className: 'sticky', // the core class which should be equal to the css. see above.\n  stateClassName: 'is-sticky',  // the state class, when the element is actually sticky\n  fixedClass: 'sticky-fixed',  // the fallback class that uses position:fixed to make the element sticky \n  wrapperClass: 'sticky-wrap', // the fallback (polyfilled) version needs a placeholder that uses the space of the actual sticky element when its position:fixed\n  wrapFixedSticky: true,  // by default the sticky element gets wrapped by the placeholder. if you set it to false it will be inserted right before it.\n  absoluteClass: 'is-absolute',  // the polyfilled sticky element needs to be position:absolut in some cases.\n  \n  // scrollclass will add a class to the sticky element that is depending on the scroll direction when the element is sticky.\n  // when the scrolling stops the class will be the value of \"none\" unless you set \"persist\" to true.\n  \n  scrollClass: {\n    down: null,\n    up: null,\n    none: null,\n    persist: false\n  }\n};\n\n// instantiate with options\nvar stickyElements = new StickyState(document.querySelectorAll('.sticky'), stickyOptions);\n\n```\n\n#### api / events\n```javascript\nvar StickyState = require('sticky-state');\nnew StickyState(document.querySelectorAll('.sticky'))\n  .on('sticky:on', function(e){console.log('sticky:on', e.target);})\n  .on('sticky:off', function(e){console.log('sticky:off' ,e.target);});\n\n```\n\u003cbr/\u003e\n\n### React Component\nhttps://github.com/soenkekluth/react-sticky-state\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoenkekluth%2Fsticky-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoenkekluth%2Fsticky-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoenkekluth%2Fsticky-state/lists"}