{"_id":"@codingheads/sticky-header","_rev":"3-091052beeb2c9ee19be03b920a59979c","name":"@codingheads/sticky-header","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@codingheads/sticky-header","version":"1.0.0","description":"A library that allows you to create sticky headers. It uses `position: sticky` and IntersectionObserver","main":"dist/cjs/index.js","module":"dist/esm/index.js","module:src":"src/index.js","umd:main":"dist/umd/index.js","types":"dist/types/index.d.js","authors":[{"name":"Codingheads","email":"dev@codingheads.com","url":"https://codingheads.com"},{"name":"Bogdan Barbu","email":"bogdan.b@codingheads.com"}],"license":"GPL-3","keywords":["sticky","header","scroll","intersectionObserver"],"scripts":{"test":"echo \"Error: no test specified\" && exit 1","watch":"webpack --progress --watch --color","format":"prettier --write \"src/**/**.{js,ts}\" \"**/*.md\"","format:check":"prettier --list-different \"src/**/**.{js,ts}\" \"**/*.md\"","pretest":"npm run build","build":"npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:types","build:cjs":"node tools/cleanup cjs && tsc -p config/tsconfig.cjs.json && babel ./dist/cjs -d ./dist/cjs","build:esm":"node tools/cleanup esm && tsc -p config/tsconfig.esm.json && babel ./dist/esm -d ./dist/esm --config-file ./config/babel.config.esm.js","build:umd":"node tools/cleanup umd && webpack --config config/webpack.config.js","build:types":"node tools/cleanup types && tsc -p config/tsconfig.types.json","clean":"node tools/cleanup","package":"npm run build && npm pack","addscope":"node tools/packagejson name @codingheads/lazyload","postversion":"git push --follow-tags"},"publishConfig":{"access":"public"},"directories":{"lib":"dist"},"repository":{"type":"git","url":"git+https://github.com/Codingheads-Developer/sticky-header.git"},"dependencies":{},"devDependencies":{"@babel/cli":"^7.14.5","@babel/core":"^7.14.6","@babel/helpers":"^7.14.5","@babel/plugin-proposal-decorators":"^7.14.5","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-async-to-generator":"^7.14.5","@babel/plugin-transform-react-jsx":"^7.14.5","@babel/plugin-transform-runtime":"^7.14.5","@babel/preset-env":"^7.14.5","@babel/preset-typescript":"^7.14.5","@babel/register":"^7.14.5","autoprefixer":"^10.2.6","babel-loader":"^8.2.2","cross-env":"^7.0.3","mini-css-extract-plugin":"^1.6.0","postcss":"^8.3.5","postcss-loader":"^6.1.1","prettier":"^2.3.2","typescript":"^4.3.5","webpack":"^5.12.0","webpack-cli":"^4.3.1","webpack-notifier":"^1.13.0"},"bugs":{"url":"https://github.com/Codingheads-Developer/sticky-header/issues"},"homepage":"https://github.com/Codingheads-Developer/sticky-header","gitHead":"24849c65d5e0b7120e76f55987b056ce12e787f0","_id":"@codingheads/sticky-header@1.0.0","_nodeVersion":"12.22.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-jByhblwiwzpEP2zthjMYuwJm/RMizbL98pj8WWwKKrGmtH+SbOUu2HNj4LIs1iv3W0B60Vjk5V0/sL30R9zw8A==","shasum":"6710b56e8caa32deb520ac865d91335f084b083f","tarball":"https://registry.npmjs.org/@codingheads/sticky-header/-/sticky-header-1.0.0.tgz","fileCount":20,"unpackedSize":86375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6WGdCRA9TVsSAnZWagAAQz0P/RGZyorQjt0u4pm+UtWo\ngX+TGiER6ad+7T2BtkorE3T5np0DmDooKt1vFzYNHI1DRgnDpEN0Aiw26rmv\nedLj9g/EoSqoc8Ar6haLRQXm1kTZMZvnmdOSvdIKkINPk6ndwMihOQjPhYmA\n3UTU4OwndKTzlmkbsDMtcgXbKndaqeV67+7bD85iVq/fsYngOKAe7DKeCYid\nh3DfRtFz1HLkoAEvERdvZkGG78x4sGTRmLhZvEPtYlPGOAx64YOFq2LSOBb3\nsQxmK2iLPHHc/nQ6D+XvoSQbH84RCqeaeWVGyPWOYOm3hwrs/yWisjBkt+EM\nlOKxpziJ+THRqz6F0kFMWpxwMrmSRwm8vH35CXmVlGqTFyDu22YVkxL1fuCQ\nw6vcO3iJaZYhNrjnOOyc7fCeAdDQRCB9H8SBMz8triN7toMrZJuPTYbgLcHV\n9zBRkR72p50m9HhLEurKLzl7p4f4MARH3z1aJuaim/Hxf4xodUiQp+9qVxNN\ny0iRPNTTu2WhmbEf8uG2lFusf0yEmkU8hHJTAuo41BYwPR+DYgEu/NK54ya8\ndBuge8YHt1u7uOx7iVk+9e9YeT1XkDnTD7vVPxMAnjp/XzJk7zI1YP4tFBqU\nQwIzXgvWZM3emHCG8ZhqyuGEGArlryQQkp+Bc1+n8zF9nxk1UG0xZzwzoF9H\nqcqa\r\n=72je\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNdKPfesznsEtf9IWjxiCevqbeKDXBEA4A7eCPPLTTowIhALMc3U2JF1hXwFOpCuNAqokZDlwRHEGkRX+65ky59BbU"}]},"_npmUser":{"name":"bogdanbeniaminb","email":"barbu.bogdan.beniamin@gmail.com"},"maintainers":[{"name":"bogdanbeniaminb","email":"barbu.bogdan.beniamin@gmail.com"},{"name":"chhq","email":"dev@codingheads.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sticky-header_1.0.0_1625907613281_0.1783675502832327"},"_hasShrinkwrap":false},"1.0.1":{"name":"@codingheads/sticky-header","version":"1.0.1","description":"A library that allows you to create sticky headers. It uses `position: sticky` and IntersectionObserver","main":"dist/cjs/index.js","module":"dist/esm/index.js","module:src":"src/index.js","umd:main":"dist/umd/index.js","types":"dist/types/index.d.js","authors":[{"name":"Codingheads","email":"dev@codingheads.com","url":"https://codingheads.com"},{"name":"Bogdan Barbu","email":"bogdan.b@codingheads.com"}],"license":"GPL-3","keywords":["sticky","header","scroll","intersectionObserver"],"scripts":{"test":"echo \"Error: no test specified\" && exit 1","watch":"webpack --progress --watch --color","format":"prettier --write \"src/**/**.{js,ts}\" \"**/*.md\"","format:check":"prettier --list-different \"src/**/**.{js,ts}\" \"**/*.md\"","pretest":"npm run build","build":"npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:types","build:cjs":"node tools/cleanup cjs && tsc -p config/tsconfig.cjs.json && babel ./dist/cjs -d ./dist/cjs","build:esm":"node tools/cleanup esm && tsc -p config/tsconfig.esm.json && babel ./dist/esm -d ./dist/esm --config-file ./config/babel.config.esm.js","build:umd":"node tools/cleanup umd && webpack --config config/webpack.config.js","build:types":"node tools/cleanup types && tsc -p config/tsconfig.types.json","clean":"node tools/cleanup","package":"npm run build && npm pack","addscope":"node tools/packagejson name @codingheads/lazyload","postversion":"git push --follow-tags"},"publishConfig":{"access":"public"},"directories":{"lib":"dist"},"repository":{"type":"git","url":"git+https://github.com/Codingheads-Developer/sticky-header.git"},"dependencies":{},"devDependencies":{"@babel/cli":"^7.14.5","@babel/core":"^7.14.6","@babel/helpers":"^7.14.5","@babel/plugin-proposal-decorators":"^7.14.5","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-async-to-generator":"^7.14.5","@babel/plugin-transform-react-jsx":"^7.14.5","@babel/plugin-transform-runtime":"^7.14.5","@babel/preset-env":"^7.14.5","@babel/preset-typescript":"^7.14.5","@babel/register":"^7.14.5","autoprefixer":"^10.2.6","babel-loader":"^8.2.2","cross-env":"^7.0.3","mini-css-extract-plugin":"^1.6.0","postcss":"^8.3.5","postcss-loader":"^6.1.1","prettier":"^2.3.2","typescript":"^4.3.5","webpack":"^5.12.0","webpack-cli":"^4.3.1","webpack-notifier":"^1.13.0"},"bugs":{"url":"https://github.com/Codingheads-Developer/sticky-header/issues"},"homepage":"https://github.com/Codingheads-Developer/sticky-header","gitHead":"56bc414201232001e8854c1a66a77bdb469c6f7f","_id":"@codingheads/sticky-header@1.0.1","_nodeVersion":"12.22.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-91hcIXN3hzoeiwsXp6uQI3UihiFPdrABiFnJATVeZlTP2QlJIcw+T9qa5tZR69vUrE9wNb/To7SsokOgc3PHqg==","shasum":"a573674ed2af442cdcb1d1902ad212e869d66446","tarball":"https://registry.npmjs.org/@codingheads/sticky-header/-/sticky-header-1.0.1.tgz","fileCount":20,"unpackedSize":86402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6WM4CRA9TVsSAnZWagAAHy4P/205dMre+55AtmUY4jwU\nHnTOWPfe1j2nBwIGIEpsyKM0la7jhKdYxhABOQAxmh1Wo3EI5qWDtIZg1WSa\nQ4xPeTloRl/Emb6/KyXwHZeZOE24F4w1qEl0Oj0c7T9aEQLfGm2W/6YpyGUR\nA7rz0uRHhKLPU6/pFucWMzodkjcgNLD5NYd2aDLe4JuzZ1IgoOY9M8Ks+0pB\n7F+Gnwgo4h1FoJB2Vi8FJiG6/T28zbR8DzPBfx3VtQsWWSqJo9BPh/GRHDiq\nNadsB6+Wth7OHL9ep5lA9ONtUuelDOMqspbXR+qvBnViBdCqi1gt+//bH4IA\nzPdyvGODtfqMBQSz1KYYrWi+2JbxzKkgVKXP6cdmaCMCwZ/0xkk4VPcR70Y3\n5bqV+IaE1baQSDFlzGbhS7HTNce69oewbJV466DU1dSLd+P5E1GM2MomEzoo\nykYehB7W6bYyTO4ObXAqAdW2HXXccupbcEqjJO+IggvUvzFrLAozKthTzQIK\no5+HHlAGlb6jB1dgPlxewio62HEyFibHkrXO1tC8MwdNIwmyrlTVpcHtU8YN\n4qkDz6AvfTc6xda6/an9fJT8y7/xGNglAOeOWkMm8fDfqVNSjsJmDfQXyRgD\nbF4ugP/HnG1/2ZdTlsPWarMPmwFgRTj0J69A14KYnMTg4RIw0o2b4QUPMxRL\nV95T\r\n=TxFJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICCSp0l1SJAetKdREjZbdqyThAYZgSG4+unEIHwOIK8WAiEA5rMeaOKlQKl3D72Q7Hw0VFvDLCTltQuKPy6cqtuLewE="}]},"_npmUser":{"name":"bogdanbeniaminb","email":"barbu.bogdan.beniamin@gmail.com"},"maintainers":[{"name":"bogdanbeniaminb","email":"barbu.bogdan.beniamin@gmail.com"},{"name":"chhq","email":"dev@codingheads.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sticky-header_1.0.1_1625908023832_0.9098459747977963"},"_hasShrinkwrap":false},"1.0.2":{"name":"@codingheads/sticky-header","version":"1.0.2","description":"A library that allows you to create sticky headers. It uses `position: sticky` and IntersectionObserver","main":"dist/cjs/index.js","module":"dist/esm/index.js","module:src":"src/index.js","umd:main":"dist/umd/index.js","types":"dist/types/index.d.js","authors":[{"name":"Codingheads","email":"dev@codingheads.com","url":"https://codingheads.com"},{"name":"Bogdan Barbu","email":"bogdan.b@codingheads.com"}],"license":"GPL-3","keywords":["sticky","header","scroll","intersectionObserver"],"scripts":{"test":"echo \"Error: no test specified\" && exit 1","watch":"webpack --progress --watch --color","format":"prettier --write \"src/**/**.{js,ts}\" \"**/*.md\"","format:check":"prettier --list-different \"src/**/**.{js,ts}\" \"**/*.md\"","pretest":"npm run build","build":"npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:types","build:cjs":"node tools/cleanup cjs && tsc -p config/tsconfig.cjs.json && babel ./dist/cjs -d ./dist/cjs","build:esm":"node tools/cleanup esm && tsc -p config/tsconfig.esm.json && babel ./dist/esm -d ./dist/esm --config-file ./config/babel.config.esm.js","build:umd":"node tools/cleanup umd && webpack --config config/webpack.config.js","build:types":"node tools/cleanup types && tsc -p config/tsconfig.types.json","clean":"node tools/cleanup","package":"npm run build && npm pack","addscope":"node tools/packagejson name @codingheads/lazyload","postversion":"git push --follow-tags"},"publishConfig":{"access":"public"},"directories":{"lib":"dist"},"repository":{"type":"git","url":"git+https://github.com/Codingheads-Developer/sticky-header.git"},"dependencies":{},"devDependencies":{"@babel/cli":"^7.14.5","@babel/core":"^7.14.6","@babel/helpers":"^7.14.5","@babel/plugin-proposal-decorators":"^7.14.5","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-async-to-generator":"^7.14.5","@babel/plugin-transform-react-jsx":"^7.14.5","@babel/plugin-transform-runtime":"^7.14.5","@babel/preset-env":"^7.14.5","@babel/preset-typescript":"^7.14.5","@babel/register":"^7.14.5","autoprefixer":"^10.2.6","babel-loader":"^8.2.2","cross-env":"^7.0.3","mini-css-extract-plugin":"^1.6.0","postcss":"^8.3.5","postcss-loader":"^6.1.1","prettier":"^2.3.2","typescript":"^4.3.5","webpack":"^5.12.0","webpack-cli":"^4.3.1","webpack-notifier":"^1.13.0"},"bugs":{"url":"https://github.com/Codingheads-Developer/sticky-header/issues"},"homepage":"https://github.com/Codingheads-Developer/sticky-header","gitHead":"bc89b90b714ca60b40e506a5dfb0dc481586c319","_id":"@codingheads/sticky-header@1.0.2","_nodeVersion":"12.22.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-pNaKWoDBN2393L++sRLfctsXpG6nDuy9+eq+NVv/Vf+z/23MUPqF4JpFHzZ9W0sQmFb3KGtwcclgDyUwt1klww==","shasum":"463181edcb927ad4a67142be7ed167419523c03a","tarball":"https://registry.npmjs.org/@codingheads/sticky-header/-/sticky-header-1.0.2.tgz","fileCount":20,"unpackedSize":86382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6WWwCRA9TVsSAnZWagAAXxAP+wSrOkJyObOOOXVOSxJc\n4aFJ8Qdd+RNLHQSJ2bIKaOEdgoD5DaOxjFJ2Pkk5g4+epGYdy+VMCNH3PT94\nCM7s+IHFQ0YRb3d0PVVuc4f2Ft/RkvxzoZDhwq3NY/3rpEMqBhDICDX0F1Sh\nfq/AiNPuT1lhLIid1lJT2oxHEnfXqK72caDK7YDzy5zkq/MaqV8/SEdg/S29\nrtNsFO74R3vLnNOjhasTsXcj0/PfqgqpYNzZFMF5oxU120RRtOPWmvAqZE6F\nsiVJjFiCBvUQ6ZuGJGZMHbA5goNSEO4s2Anpn66B5FEPKKolcJrMLIgqloiw\nLcRn893VfZlCMkJx38XDVkx5K9YlCrI1gDgqLtcOWkSCeCx9DZusCrIy2scu\ng7vv3IRV3HpZh8SCgXcFSzP+aaL0EM8K5Oo1KGZ1USY0OiuAY4jfuD9NxuA+\nLbI7roOA+OO6t+th7BmKgqANMr8rpiYS7Nbgn9iwzXyL9Pp7gNs1MqKxOmsY\nFG6h0MkzHjC+cWbo8+zpV0MYc4tF1dqAfZdgWKWsAfJsL/NPNtrcxwnFXMV3\nJl9oIOB5jrMXzyUm7PXCLW9+nDYew4JUsah52QUOQs/McjXxe1WPVO05m/lE\nHfnZ99iTLCQ83yNYwXn+hhMaVdVBM+fs7fp6B8IpmODHhwYcKgiYZ1ToH3/U\nbjwY\r\n=b9Rk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCl6myyP1qnOu4CrXXXgSJU44SPW/WkNT0EWPpcHPRdmgIgXZk4iYdIJOKIdZqxxe91ncZBJ2Ki2g6pW0gRXaZ51Qo="}]},"_npmUser":{"name":"bogdanbeniaminb","email":"barbu.bogdan.beniamin@gmail.com"},"maintainers":[{"name":"bogdanbeniaminb","email":"barbu.bogdan.beniamin@gmail.com"},{"name":"chhq","email":"dev@codingheads.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sticky-header_1.0.2_1625908656237_0.25783863351258285"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-10T09:00:12.912Z","1.0.0":"2021-07-10T09:00:13.460Z","modified":"2022-04-05T00:09:35.442Z","1.0.1":"2021-07-10T09:07:04.017Z","1.0.2":"2021-07-10T09:17:36.357Z"},"maintainers":[{"name":"bogdanbeniaminb","email":"barbu.bogdan.beniamin@gmail.com"},{"name":"chhq","email":"dev@codingheads.com"}],"description":"A library that allows you to create sticky headers. It uses `position: sticky` and IntersectionObserver","homepage":"https://github.com/Codingheads-Developer/sticky-header","keywords":["sticky","header","scroll","intersectionObserver"],"repository":{"type":"git","url":"git+https://github.com/Codingheads-Developer/sticky-header.git"},"bugs":{"url":"https://github.com/Codingheads-Developer/sticky-header/issues"},"license":"GPL-3","readme":"# Sticky Header\n\nThis library allows you to create sticky headers. It uses `position: sticky` and IntersectionObserver.\n\nThe plugin doesn't require jQuery, but it adds itself to jQuery if jQuery exists on the page.\n\n## Installing\n\nUse npm (or yarn) to install the package.\n\n```npm2yarn\nnpm install --save @codingheads/sticky-header\n```\n\n## Initializing in JavaScript\n\nTo initialize the library, you need to create a new instance of the `StickyHeader` class:\n\n```javascript\nimport StickyHeader from '@codingheads/sticky-header';\n\nconst header = document.querySelector('header.page-header');\nnew StickyHeader(header, options);\n```\n\nOr using jQuery:\n\n```javascript\nimport '@codingheads/sticky-header';\n\n$('header.page-header).stickyHeader(options);\n```\n\nThe options object can have the following properties:\n\n- `mainClass` - the class added when the plugin is initialized (default: `sticky`)\n- `pinnedClass` - the class added when the element becomes \"stuck\" (default: `sticky-pinned`)\n- `unpinnedClass` - the class added when the element becomes \"unstuck\" (default: `sticky-unpinned`)\n- `offset` - the offset (in pixels) where the element should become \"stuck\" (default: 0)\n- `addBodyClasses` - add the `pinnedClass` and `unpinnedClass` classes to the body element as well (default: true)\n\n## Warnings\n\n1. The plugin uses `position: sticky`. This is supported in all modern browsers. However, `position: sticky` has some requirements: you must not have parent elements with `overflow: hidden`, or otherwise it will not work (the position will be static). If you cannot get it to start, check that you don't have `overflow: hidden` on a parent element.\n\n2. If you change the header size depending on the \"stuck\"/\"unstuck\" status, you will probably need to prevent the window from scrolling when this happens (the header will push the content).\n\n  If you have a `#wrapper` element around the content (including the header), you could do something like this:\n\n  ```css\n  header.sticky {\n    top: 0;\n    position: sticky;\n  }\n\n  /** fix for when the header grows in size when it becomes unpinned and the scroll position changes (we need to scroll more) **/\n  @supports (position: sticky) {\n    body.sticky-unpinned #wrapper {\n      overflow-anchor: none;\n    }\n  }\n\n  ```","readmeFilename":"README.md"}