{"_id":"sticky-scroller","_rev":"6-929673f51ae96e03f2182e224caf90d9","name":"sticky-scroller","dist-tags":{"latest":"0.4.0"},"versions":{"0.2.0":{"name":"sticky-scroller","version":"0.2.0","description":"Scroll your very long sticky positioned sidebar","main":"index.js","scripts":{"build":"webpack","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/guoyunhe/sticky-scroller.git"},"keywords":["css","sticky-position","sticky-sidebar","scroll"],"author":{"name":"Guo Yunhe"},"license":"GPL-3.0","bugs":{"url":"https://github.com/guoyunhe/sticky-scroller/issues"},"homepage":"https://github.com/guoyunhe/sticky-scroller#readme","devDependencies":{"webpack":"^4.3.0","webpack-cli":"^2.0.13"},"gitHead":"4648ec01299f24928a03fcbfa9151f83169bc3da","_id":"sticky-scroller@0.2.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"guoyunhe","email":"guoyunhebrave@gmail.com"},"dist":{"integrity":"sha512-mVxb2CIaz0cZixPuGvz1bYDWJG2UGY+IEeYDi9ixKLZceLy6pNo66uTifCwsaaL1xKR9K8ga2Z5CnVIDIRgbSg==","shasum":"2f93a0394dcef242d20d523f226b913dfa3a7a39","tarball":"https://registry.npmjs.org/sticky-scroller/-/sticky-scroller-0.2.0.tgz","fileCount":12,"unpackedSize":52590,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWrtGO4rLsAGxRpcKcdKhnCB/YPTGjZ3tjws3uvJufVQIhAJEUvAhUlS4hi1vBviH9MTDVLXYH7m/Ewy+WmtWUoYRw"}]},"maintainers":[{"name":"guoyunhe","email":"guoyunhebrave@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sticky-scroller_0.2.0_1522428584715_0.787048099178286"},"_hasShrinkwrap":false},"0.3.0":{"name":"sticky-scroller","version":"0.3.0","description":"Scroll your very long sticky positioned sidebar","main":"dist/sticky-scroller.js","module":"index.js","scripts":{"build":"webpack","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/guoyunhe/sticky-scroller.git"},"keywords":["css","sticky-position","sticky-sidebar","scroll"],"author":{"name":"Guo Yunhe"},"license":"GPL-3.0","bugs":{"url":"https://github.com/guoyunhe/sticky-scroller/issues"},"homepage":"https://github.com/guoyunhe/sticky-scroller#readme","devDependencies":{"webpack":"^4.3.0","webpack-cli":"^3.3.0"},"gitHead":"7b8a525b8895ecf21878baab5a9ba589e170a777","_id":"sticky-scroller@0.3.0","_nodeVersion":"10.15.2","_npmVersion":"6.9.0","dist":{"integrity":"sha512-1fnCkhlgrqabkEsw5qV9kf4p1OEA8BnsW8eznEdsN9LKH73bT5P7m+WQKfBFztF0tkBXeUAgPJ4a0lkY2ov/TQ==","shasum":"ded9a8ab517c9e698e36871523012f2d1cc5b209","tarball":"https://registry.npmjs.org/sticky-scroller/-/sticky-scroller-0.3.0.tgz","fileCount":12,"unpackedSize":52926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcu/0VCRA9TVsSAnZWagAA34MP/2t4BXcutel5F/5X4+WK\nGcWLFOX8SEsSYzYrzxfR2WLDGT0TtYf8b/fJWUVlaluZQBefGv/FlKOJJlA8\nhjNyULFSiQRucrF1G624Lb8ZznZMOa4QiHT7p4Qy9CiaR0vO/dZEWeiX1oze\nnFBcXNbJEFQkg1KCPwVoLAWQG5SNhmALNHmiMF58kKqIy6yKeagHSyGfC9bT\n+x7U86YVtA0ANtXjYwIRAUICm6yDtzHymlzNVMmHGCYAI8Z8Goq/z7S0t7ks\n1cCi5si6khBuFLuwtVDzJMQoJoVV1Nz6u6ylAOSLwgokI7B1Yzdaib7sdJLv\nBsZJ5s5TBs4+HR+5GZJ/Hpra/+EHyrgofn0bVkpmxLIoGusdqlwx+wOceEn+\nLaSBzDHWu3dd4AAirnYP87gB9a76Ir1q4qZVj/rz0YB/qXlhABtBP6vqo/U8\nWck0btQdoUacREf9RqElCCK1O70MuYPtzo1wv9vET+J/ED3MniWVjP61H5GL\nplqFaTeww1Dm/ea+jg5N7IXgO6xO6CYjsxEx+9igs0LAzqbWYwfJKV/A8EfR\nfoS9VYZ21PiSCbv6GyNUUy+BdDcAUn/eViVLPCFkKfa0n0S9YccdMghgf4F8\n9E0tggekbrlT276moC1dAdwyDN6B9KzI/NsU7VDni+k4orEKsfathLMgc+BC\nxULV\r\n=SH/R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA7nmaFDnU72J2zr4ku17u5xJsEfPesZlc2ov1fgvi+rAiEAijzP22W1ubeocAo6StYx9feWO/UM8xcyGod+GRExgkk="}]},"maintainers":[{"name":"guoyunhe","email":"guoyunhebrave@gmail.com"}],"_npmUser":{"name":"guoyunhe","email":"i@guoyunhe.me"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sticky-scroller_0.3.0_1555823892524_0.24469664549886394"},"_hasShrinkwrap":false},"0.4.0":{"name":"sticky-scroller","version":"0.4.0","description":"Scroll your very long sticky positioned sidebar","main":"dist/sticky-scroller.umd.js","module":"index.js","scripts":{"build":"webpack","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/guoyunhe/sticky-scroller.git"},"keywords":["css","sticky-position","sticky-sidebar","scroll"],"author":{"name":"Guo Yunhe"},"license":"GPL-3.0","bugs":{"url":"https://github.com/guoyunhe/sticky-scroller/issues"},"homepage":"https://github.com/guoyunhe/sticky-scroller#readme","devDependencies":{"webpack":"^4.3.0","webpack-cli":"^3.3.0"},"gitHead":"e1a710a305ded531dba8e097c5b99fa0d03d5203","_id":"sticky-scroller@0.4.0","_nodeVersion":"10.15.2","_npmVersion":"6.9.0","dist":{"integrity":"sha512-4y8Dhex3LRNTWhyW4QyofMSgKYija53B+Up2TPyVlGFMLLggrvMDlo9JCgqfxHibC9zIiSnyilauTJrxWHtjtg==","shasum":"c539b51ba26dc30ab317bd7cd892a9754abeedf5","tarball":"https://registry.npmjs.org/sticky-scroller/-/sticky-scroller-0.4.0.tgz","fileCount":12,"unpackedSize":52930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvA0UCRA9TVsSAnZWagAA/o8P+gIGExOd7J/iHZ1th3TM\nAaKKp+eylYSWInzsSCaWJArWN5k5srq1F2bM3ATDVrTBSWsLbT0p1c4tgt1w\nHH75/434C/tDDqhGEsKHHwT7dxL27Mw34oSR5obw3kBx2kBYCEuAKWZq9SOs\nBcTTnHDIOtFrKLiog+zo/KHWTbeDIpcXj5sAtp1liAxhAsjbLfgG8fiwrqBy\nQJnyf08XQPpTjG1PJEsDx/XLeLUTE8EeZQ4lSeo2J8jkLZQgTATz+NDQdJBO\nU8ra6qjaZqgPtvtxSAmTBAwPIL6dcyvWBFDxQTg8sOidr9V1typ0yIUOh/5E\nTygaY+yE9nnTnKEz1cygUUqW6Ov6wXRChGmiSqIthlwfh81mncm1Z2IYQGJ3\n1Se5iqm0c5yIh8Izvn0JQFfyOFt1TFwrC5zbl4xsEVfAg1nAyobSvgkXiRTj\nRDgVvIzpEiM2aDunuZTAA+hoNgQOMRU3lrjzDp7dahS/yIckBfzRIkDWnwGN\n+lJOxbJC/+LhjhLyMmjqDZXA1ta3LDQDYN+vydCN5L9HzjbY4PsqZys+KMwG\nUcY/nYH0LhqHXjg4QCdi+fF4fTO6K1gu5VWE1lJvDp66agkAsveKHll1PUcM\nYQ3wLngniKlde6HptjT+dS1FWYHihQCgaf5wu6MP+K/uMRufewpYiR1Pg9FP\n1CSC\r\n=gH5H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHt5hbu7Kw3NnSkBmpkeBF8TeBU8GvHFbJrMzgxElOLJAiBdTjfIhGXCvOjhtFgPuKW+xF8ASFrJPraIBgPQJMnzkA=="}]},"maintainers":[{"name":"guoyunhe","email":"guoyunhebrave@gmail.com"}],"_npmUser":{"name":"guoyunhe","email":"i@guoyunhe.me"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sticky-scroller_0.4.0_1555827988259_0.7345144691367789"},"_hasShrinkwrap":false}},"time":{"created":"2018-03-30T16:49:44.715Z","0.2.0":"2018-03-30T16:49:44.779Z","modified":"2022-05-18T18:02:26.389Z","0.3.0":"2019-04-21T05:18:12.649Z","0.4.0":"2019-04-21T06:26:28.375Z"},"maintainers":[{"email":"i@guoyunhe.me","name":"guoyunhebrave"},{"email":"i@guoyunhe.mE","name":"guoyunhe"}],"description":"Scroll your very long sticky positioned sidebar","homepage":"https://github.com/guoyunhe/sticky-scroller#readme","keywords":["css","sticky-position","sticky-sidebar","scroll"],"repository":{"type":"git","url":"git+https://github.com/guoyunhe/sticky-scroller.git"},"author":{"name":"Guo Yunhe"},"bugs":{"url":"https://github.com/guoyunhe/sticky-scroller/issues"},"license":"GPL-3.0","readme":"# Sticky Scroller\n\nScroll your very long sticky positioned sidebar.\n\n\n\n## Why do we need JavaScript?\n\n`position: sticky` is a very useful and interesting CSS3 feature. When scrolling\npage, navbar/header/sidebar can magically switch between `static` and `fixed`\nposition. Usually, height of sticky element is smaller than viewport height. It\nmeans you do not need to scroll the content of sticky element.\n\nHowever, when you have a sidebar with a long list and it is not able to show all\ncontent in viewport, `position: sticky` cannot help with this. When you scroll\nthe page, sidebar content doesn't scroll.\n\nYou may come up with a quick solution:\n\n```css\nsidebar {\n position: -webkit-sticky; /* Safari */\n position: sticky;\n top: 0;\n height: 100vh;\n overflow-y: auto;\n}\n```\n\nThen you can scroll sidebar content, right?\n\n\n\nHere are some disadvantages of above solution:\n\n1. You have two long scroll bars on the page and it is annoying.\n2. Scroll in a sticky/fixed element cause issues on all browsers, especially\n mobile browsers. You unexpectedly scroll the whole page instead of floating\n content sometimes.\n3. Users have to move mouse from one area to another area to scroll content. It\n is not a good user experience.\n4. Some users prefer to use keyboard to scroll page. They cannot scroll\n floating content with keyboard.\n\nSo how JavaScript can make a difference?\n\nJavaScript syncronize scrolling of page and sticky sidebar.\n\n1. To avoid ugly multiple scroll bars, it forces `overflow-y: hidden` for\n floating container.\n2. Even with `overflow-y: hidden`, content can still be scrolled by JavaScript.\n3. When page is scrolled down / up, floating content will be scrolled in the\n same way.\n4. Since it listens to `window`, you can point mouse cursor anywhere on the\n page, or even use keyboard.\n5. Scrolling syncronization has the same behavior on all modern browsers. No\n unexpected scrolling conflicts anymore.\n\n## Download / Install\n\n### NPM + Webpack / Browserify\n\nInstall with NPM.\n\n```\nnpm install sticky-scroller --save\n```\n\nImport with Webpack or Browserify.\n\n```js\n// Old way\nvar StickyScroller = require(\"sticky-scroller\");\n\n// New way\nimport StickyScroller from \"sticky-scroller\";\n```\n\n### Download and Link\n\nDownload latest release and unpack, you will need `dist/sticky-scroller.js`.\n\nLink it in HTML.\n\n```html\n\n\n\n\n\n```\n\n### RequireJS\n\nAMD package is build for you if you prefer RequireJS.\n\n```html\n\n```\n\n```js\nrequirejs([\"StickyScroller\"], function(StickyScroller) {\n // What ever you like\n});\n```\n\n### SystemJS\n\nUMD module is placed at `dist/sticky-scroller.umd.js`\n\n## Usage\n\nChange `top` and `height` (or `max-height`) to whatever you like. Make sure it\nis within viewport. You don't need `overflow-y: hidden` since it will be added\nby JavaScript.\n\n```css\n.my-sidebar {\n position: -webkit-sticky; /* Safari */\n position: sticky;\n top: 0;\n height: 100vh;\n}\n```\n\n```js\nconst scroller = new StickyScroller(\".my-sidebar\");\n```\n\nIf you prefer to use it with jQuery:\n\n```js\n$(\".my-sidebar\").stickyScroller();\n```\n\n## API\n\n### StickyScroller(element, options)\n\nConstructor of main controller.\n\n#### element `string` | `HTMLElement`\n\nThe sticky element. Use a selector string or HTMLElement object.\n\n#### options `Object`\n\nNo option available now.\n\n## Copyright\n\nCopyright 2018 Guo Yunhe.\n\n## License\n\nGNU General Public License version 3 or later.\n","readmeFilename":"README.md"}