{"_id":"scrollpos-styler","_rev":"7-a15f078f51321524dfac96c658f4107c","name":"scrollpos-styler","description":"JavaScript to add custom CSS class to a HTML element depending on scroll position","dist-tags":{"latest":"0.7.1"},"versions":{"0.6.0":{"name":"scrollpos-styler","version":"0.6.0","description":"JavaScript to add custom CSS class to a HTML element depending on scroll position","main":"scrollPosStyler.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/acch/scrollpos-styler.git"},"keywords":["scroll","position","bootstrap","4"],"author":{"name":"Achim Christ"},"license":"MIT","bugs":{"url":"https://github.com/acch/scrollpos-styler/issues"},"homepage":"https://github.com/acch/scrollpos-styler#readme","gitHead":"b75d1a1d01599e2ce27a168e06eefd19fb577d0b","_id":"scrollpos-styler@0.6.0","_shasum":"b5b89dc8fd903a0688661957988445698b4dae96","_from":".","_npmVersion":"4.0.5","_nodeVersion":"7.2.1","_npmUser":{"name":"acch","email":"acch@users.noreply.github.com"},"dist":{"shasum":"b5b89dc8fd903a0688661957988445698b4dae96","tarball":"https://registry.npmjs.org/scrollpos-styler/-/scrollpos-styler-0.6.0.tgz","integrity":"sha512-cW1WSYeddW7P3xVTKkalAYXAY7JN8bwsXqYPDziZJAU+GX4Nlsa/R5IqWmjypeHMQoO6k2CzomhZsgAU8Fq/iQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTkCN5g92duT0wBRvr0bQI2Z9g7Cvnj7J7Zu/30HeZBQIgZIGDewRJeAJPrd1PvlD1Bpw1mwecWSH28biPbWqKpvo="}]},"maintainers":[{"name":"acch","email":"acch@users.noreply.github.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/scrollpos-styler-0.6.0.tgz_1482085260085_0.12970512942411005"},"directories":{}},"0.6.1":{"name":"scrollpos-styler","version":"0.6.1","description":"JavaScript to add custom CSS class to a HTML element depending on scroll position","main":"scrollPosStyler.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/acch/scrollpos-styler.git"},"keywords":["scroll","position","bootstrap","4"],"author":{"name":"Achim Christ"},"license":"MIT","bugs":{"url":"https://github.com/acch/scrollpos-styler/issues"},"homepage":"https://github.com/acch/scrollpos-styler#readme","gitHead":"f0ccb549fce29a7b22a02e13e02bf65fa837c187","_id":"scrollpos-styler@0.6.1","_shasum":"276419bea275b61cf0f2cc8fa44de0db9ec1bc03","_from":".","_npmVersion":"4.0.5","_nodeVersion":"7.2.1","_npmUser":{"name":"acch","email":"acch@users.noreply.github.com"},"dist":{"shasum":"276419bea275b61cf0f2cc8fa44de0db9ec1bc03","tarball":"https://registry.npmjs.org/scrollpos-styler/-/scrollpos-styler-0.6.1.tgz","integrity":"sha512-1XhlNbDrUgq/Pbn+B7xdfsDgZbqmnLHmRLXUypeU6MLHL/hwBp882D7i0/cQN3d5mxd5KRCjRQmAyME3k0Qhng==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+vZD5LAbI1fkzFtAU1z19Jcd3xpL9/Es41lvO2b5zWwIhAL3FJ7gQIQU3Y22UIl75WvUn99qJbdT4Ezrs9bB0Semb"}]},"maintainers":[{"name":"acch","email":"acch@users.noreply.github.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/scrollpos-styler-0.6.1.tgz_1482085917483_0.18858481105417013"},"directories":{}},"0.7.0":{"name":"scrollpos-styler","version":"0.7.0","description":"JavaScript to add custom CSS class to a HTML element depending on scroll position","main":"scrollPosStyler.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/acch/scrollpos-styler.git"},"keywords":["scroll","position","bootstrap","4"],"author":{"name":"Achim Christ"},"license":"MIT","bugs":{"url":"https://github.com/acch/scrollpos-styler/issues"},"homepage":"https://github.com/acch/scrollpos-styler#readme","gitHead":"dbc40c604448a5913f0510c03b4950ccba14756e","_id":"scrollpos-styler@0.7.0","_shasum":"f000087e52001d64abc2d3543aec5b55a23329fe","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.1","_npmUser":{"name":"acch","email":"acch@users.noreply.github.com"},"dist":{"shasum":"f000087e52001d64abc2d3543aec5b55a23329fe","tarball":"https://registry.npmjs.org/scrollpos-styler/-/scrollpos-styler-0.7.0.tgz","integrity":"sha512-x37JxAYBC+9l0E/NNMf27G4B+Vf8Txvcc/vNnCStboXbu8AOIodquLbqKbjVBO6/8O4dDLjObMfirXheqTjoTw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3W7/4g0owbkm1G+yal9dxR2aVzNdVzbdKnssCWY1TIgIgcmSWasqKy07CeWfmodyvZfMFESKEptXy9qjMAj97VXI="}]},"maintainers":[{"name":"acch","email":"acch@users.noreply.github.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollpos-styler-0.7.0.tgz_1501150861398_0.2949345917440951"},"directories":{}},"0.7.1":{"name":"scrollpos-styler","version":"0.7.1","description":"JavaScript to add custom CSS class to a HTML element depending on scroll position","main":"scrollPosStyler.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","minify":"uglifyjs scrollPosStyler.js -c -m --comments -o scrollPosStyler.min.js"},"repository":{"type":"git","url":"git+https://github.com/acch/scrollpos-styler.git"},"keywords":["scroll","position","bootstrap","4"],"author":{"name":"Achim Christ"},"license":"MIT","bugs":{"url":"https://github.com/acch/scrollpos-styler/issues"},"homepage":"https://github.com/acch/scrollpos-styler#readme","devDependencies":{"uglify-js":"^3.4.9"},"gitHead":"7a73a3ca2d5fc2a810a8270eb09c39d36f596b8f","_id":"scrollpos-styler@0.7.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"acch","email":"acch@users.noreply.github.com"},"dist":{"integrity":"sha512-xK5hb9P/HAox1UgUm8Hu2xX5zJp+Hih1fds3rfQq/2HMn10FtI5kVQ+VXJ6o1B2sZp+kn/dEy8uUM9JCeTmfaw==","shasum":"2cf75b376f847daf5cae74b4e734bfc2dc750588","tarball":"https://registry.npmjs.org/scrollpos-styler/-/scrollpos-styler-0.7.1.tgz","fileCount":5,"unpackedSize":15558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrbnkCRA9TVsSAnZWagAA4UgP/j9YSuQLeENDwdxP3UCs\nKDyT5e4eVTtdYvG40ZPB2mWBQJAdhXE1/FTOr7QmHKAgX/HK4mu5s4DnzWeQ\npYxj2tThTDFG54EXtqCUZDJH7rPZF6/w4Oyl4m6ZZfIxB07RcAIqGfuZenr/\nMCo7xRuBIRTLP/SW2uMcQfdp+QZBz+dtNjL539fD2yKBq9qdZzZdfGQLfzUB\n1EtZ12LF+Xe3Hi6MnYeo+9/8xV3KX+I0V0NFxT4kJHjXdKd8c0nRyeze9bI2\nRyYfCaqEJn9mNmUBkV+l50zkdt0oLhQOBQ9IRwV1C8IMOcMRmkk92k6xIPZi\nd3IRhpqBFcbc1rtilLIVcHbFC+IUkLeTOP4iRRUR/Nv1Km9W8V6EyT/GrC7c\nzuLssJPhnhg9gicR1jFEljDMyLfw8Sqpat+ukjXkzBAK9SWxzbojBA7R8dK3\nh+wozFKqTko/ZuuDYskvgi7Xb6J4Bn9WNtSEZz3Zq5CqOXlSIK/82F9idQJ9\nr5OiyzRc9neBNGShhPweW7YH+8GpOWXQQYzOKeLjs6VBIJKdzstnNG3urrz3\nTIyAeDo+nCDSGXKk6SXZd6mdILeT8KDl5HKZ19YDBk67tcyPCJZPeIAgaMAK\nNpotFBa/Yi4xVCAdiI3JFi3NMhUJ4y1Os4lhJFhWaOa++yKFWvoyrJD4oX7l\nrsf1\r\n=nQEu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHzmitXVY7Pm4X4+lvNursih2JHKHPp55h+gEpJ5wUlQIgZoI6ZZzRb0rLCtgf5pff5OdZ0M5dUJe8EHD3o8lSFH4="}]},"maintainers":[{"name":"acch","email":"acch@users.noreply.github.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scrollpos-styler_0.7.1_1554889187798_0.5055014041451977"},"_hasShrinkwrap":false}},"readme":"# ScrollPos-Styler\n\n[![GitHub Issues](https://img.shields.io/github/issues/acch/scrollpos-styler.svg)](https://github.com/acch/scrollpos-styler/issues) [![GitHub Stars](https://img.shields.io/github/stars/acch/scrollpos-styler.svg?label=github%20%E2%98%85)](https://github.com/acch/scrollpos-styler/) [![NPM Downloads](https://img.shields.io/npm/dw/scrollpos-styler.svg?label=npm)](https://www.npmjs.com/package/scrollpos-styler) [![License](https://img.shields.io/github/license/acch/scrollpos-styler.svg)](LICENSE)\n\nSimple JavaScript to add a custom CSS class to an HTML element depending on the window's scroll position. One CSS class is added when scrolling below a certain position, and another one is added when scrolling above that position.\n\n## Background and Motivation\n\n[Bootstrap](http://getbootstrap.com) v3 has a JavaScript component named Affix. [Affix](http://getbootstrap.com/javascript/#affix) can be used to modify CSS properties of an element when reaching a certain scroll position. The main use case for it is to change positioning of the element when scrolling past the element - i.e. switching from relative to fixed positioning so that the element remains visible when otherwise the user would scroll past it.\n\nWith v4 of Bootstrap, the Affix component is dropped in favor of `position:sticky` - which can be used to address the above use case. Many modern browsers have native support for it already, and [polyfills](http://html5please.com/#sticky) are available for browsers which do not natively support `position:sticky`.\n\nHowever, there are other scenarios in which Affix could be used to apply custom styles / classes to elements when reaching certain scroll positions. A common example is changing the text color and background of a fixed navigation bar upon scrolling. Initially (when the page is scrolled to the very top), the navigation bar seamlessly integrates into the page - i.e. it is flat, transparent and without any shadow. When scrolling downwards, the navigation bar 'stands out' so that it seems to be hovering above the page. The background (and text) color might change, it might drop shadow, etc.\n\nThis scenario is not addressed by `position:sticky` - and this is where the small ScrollPos-Styler script comes to the rescue.\n\nLook at the [demo](http://acch.github.io/scrollpos-styler/demo/demo.html) to get a better understanding of the effect.\n\n## Differentiation and Limitations\n\nThis script is designed to modify attributes OTHER THAN an element's position. It doesn't work well when changing positioning of an element. Switching between `position:relative` and `position:fixed` is exactly what `position:sticky` is designed for, and this script in no viable alternative. Refer to the [documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/position) for details, and use [polyfills](http://html5please.com/#sticky) for older browsers.\n\n## Installation\n\nSeveral options are available:\n\n- Download the latest [release](https://github.com/acch/scrollpos-styler/releases/latest)\n- Clone the repo: `git clone https://github.com/acch/scrollpos-styler.git`\n- Install with [Bower](http://bower.io/): `bower install scrollpos-styler`\n- Install with [npm](https://www.npmjs.com/): `npm install scrollpos-styler`\n\n## Usage\n\nSimply import the `scrollPosStyler.js` script into your HTML page at the very end of the body element. Then, add the `.sps` class to the element(s) which you want to style. Define the two CSS classes `.sps--abv` and `.sps--blw` and you're all set!\n\nThe `.sps--abv` class will be added to your element when the window is scrolled above the defined position, and `.sps--blw` will be applied when it is scrolled below that position.\n\nThe default scroll position to trigger the style is 1px, meaning that as soon as the user starts scrolling the CSS class will be toggled. This can be changed by adding the `data-sps-offset` tag in HTML and specifying an offset or by modifying the `scrollOffsetY` variable in JavaScript.\n\nYou should add the `.sps--abv` class to the element in your HTML code already, to avoid any flickering when JavaScript is initially executed.\n\nTo style elements which were created after the page was initially loaded (i.e. using JavaScript), a public initialization function is available. Simply run `ScrollPosStyler.init()` to add the appropriate class based on the current scroll position. [Demo2](http://acch.github.io/scrollpos-styler/demo/demo2.html) shows you this in action.\n\nThe following options can be used in `ScrollPosStyler.init()`:\n\nName | Type | Default | Description\n--- | --- | --- | ---\nscrollOffsetY | number | 1 | Default scroll position in px to trigger the style.\nspsClass | string | 'sps' | Classname used to determine which elements to style.\nclassAbove | string | 'sps--abv' | Classname added to the elements when the window is scrolled above the defined position. Default is 'sps--abv'.\nclassBelow | string | 'sps--blw' | Classname added to the elements when the window is scrolled below the defined position. Default is 'sps--blw'.\noffsetTag | string | 'data-sps-offset' | HTML tag used on the element to specify a scrollOffsetY other than the default.\n\n### Dependencies\n\nNone. The script does not require jQuery or other JavaScript libraries. While being designed for Bootstrap, it does not require it.\n\n### Browser support\n\nThe script uses [`Window.requestAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame), as well as [`Element.classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). This means that it is supported by fairly modern browsers, only (IE 10+, Firefox 23+, Chrome 24+, Safari 6.1+). I don't plan on supporting older browsers, thus don't plan to implement any workarounds.\n\nIf you need to support older browsers then these links may provide valuable information:\n- http://www.html5rocks.com/en/tutorials/speed/animations/\n- http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript\n- https://developer.mozilla.org/en-US/docs/Web/API/Element/classList\n\n## Examples\n\nThe script can be used for more than just styling a static navbar. The following list provides additional usage examples for those seeking some inspiration:\n\n-  [Demo3](http://acch.github.io/scrollpos-styler/demo/demo3.html) shows how to style relative offsets — thanks to [@mamarmite](https://github.com/mamarmite)\n\n## Copyright and license\n\nCopyright 2015 Achim Christ, released under the [MIT license](LICENSE).\n","maintainers":[{"name":"acch","email":"acch@users.noreply.github.com"}],"time":{"modified":"2022-06-26T16:55:34.041Z","created":"2016-12-18T18:21:02.232Z","0.6.0":"2016-12-18T18:21:02.232Z","0.6.1":"2016-12-18T18:31:59.771Z","0.7.0":"2017-07-27T10:21:02.378Z","0.7.1":"2019-04-10T09:39:47.917Z"},"homepage":"https://github.com/acch/scrollpos-styler#readme","keywords":["scroll","position","bootstrap","4"],"repository":{"type":"git","url":"git+https://github.com/acch/scrollpos-styler.git"},"author":{"name":"Achim Christ"},"bugs":{"url":"https://github.com/acch/scrollpos-styler/issues"},"license":"MIT","readmeFilename":"README.md"}