{"_id":"@apatheticwes/stickynav","_rev":"2-59abd7b4af97e58bfb12045cfb869859","name":"@apatheticwes/stickynav","dist-tags":{"latest":"0.5.8"},"versions":{"0.5.8":{"name":"@apatheticwes/stickynav","author":{"name":"wes hatch"},"license":"MIT","version":"0.5.8","description":"A simple navigation bar that efficiently attaches / detaches to the top of the viewport upon scrolling","main":"./dist/stickynav.cjs.js","broswer":"./dist/stickynav.js","jsnext:main":"./dist/stickynav.es6.js","module":"./dist/stickynav.es6.js","repository":{"type":"git","url":"git+https://github.com/apathetic/stickynav.git"},"keywords":["sticky","nav"],"scripts":{"start":"http-server ./ -p 8080 -d","clean":"rm -f dist/*.js","build":"npm run clean && npm run lint && rollup -c","lint":"eslint source/js/*.js","test":"#tape -r babel-register test/*.js"},"devDependencies":{"@apatheticwes/scrollify":"^0.2.0","eslint":"^3.1.1","eslint-config-defaults":"^9.0.0","http-server":"^0.9.0","rollup":"^0.34.1","rollup-plugin-buble":"^0.12.1","rollup-plugin-node-resolve":"^2.0.0","tape":"^4.6.0"},"gitHead":"badde353ec6210d6b3759925d2308dc49aa2e65f","bugs":{"url":"https://github.com/apathetic/stickynav/issues"},"homepage":"https://github.com/apathetic/stickynav#readme","_id":"@apatheticwes/stickynav@0.5.8","_npmVersion":"5.5.1","_nodeVersion":"9.2.0","_npmUser":{"name":"apatheticwes","email":"wes.hatch@gmail.com"},"dist":{"integrity":"sha512-TxLlIaGetuny2DgnO2s2qVr5vdPSqMDKnJMzCxw8TTKY0kG81704Eah4jT1ocPz60v4Hd4CjBuQ1IXHxIdTT/Q==","shasum":"bc8a3e7329dfaac61a0fc1783a5bc6d86053f50c","tarball":"https://registry.npmjs.org/@apatheticwes/stickynav/-/stickynav-0.5.8.tgz","fileCount":17,"unpackedSize":62165,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUv8Qxy4njWkg1VVKVW31EEV9SGo3wRJuHOkk8JaaWYQIgcjJcr4Qj8RacyBKFogiYXm39AKQNpgpvXJEQKSebHaY="}]},"maintainers":[{"name":"apatheticwes","email":"wes.hatch@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stickynav_0.5.8_1518316956589_0.14475557051867805"},"_hasShrinkwrap":false}},"time":{"created":"2018-02-11T02:42:36.160Z","0.5.8":"2018-02-11T02:42:37.335Z","modified":"2022-04-04T14:32:36.509Z"},"maintainers":[{"name":"apatheticwes","email":"wes.hatch@gmail.com"}],"description":"A simple navigation bar that efficiently attaches / detaches to the top of the viewport upon scrolling","homepage":"https://github.com/apathetic/stickynav#readme","keywords":["sticky","nav"],"repository":{"type":"git","url":"git+https://github.com/apathetic/stickynav.git"},"author":{"name":"wes hatch"},"bugs":{"url":"https://github.com/apathetic/stickynav/issues"},"license":"MIT","readme":"# Sticky Nav\n[![NPM Version](https://img.shields.io/npm/v/@apatheticwes/stickynav.svg?style=flat-square)](https://www.npmjs.com/package/@apatheticwes/stickynav)\n[![License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](https://raw.githubusercontent.com/apathetic/stick/master/LICENSE)\n\n> A package of \"Sticky Navigation\" utilities\n\n## Introduction\n\nA collection of 3 mini-utilities: a \"sticky\" Class to affix elements to the top of the viewport when scrolled, a function to smoothly scroll the page to any anchor, and a Class that auto-generates an in-page navigation from data-attribues in the DOM.  \n\n`Scroll` and `Sticky` may be used individually, but when used in tandem via `StickyNav` the result is an automatically created navigation menu that sticks to the top of the viewport, with nav-items that smoothly scroll to corresponding anchors in the page.\n\n## Installation\n\nIf you're oldskool, you can download the [pre-built version](https://github.com/apathetic/stickynav/blob/master/dist/stickynav.js\n) to quickly mess around. Otherwise:\n\n`npm i @apatheticwes/stickynav -D`\n\n### ES6\n```javascript\nimport { Sticky, Scroll, StickyNav } from 'stickynav';\n```\n\n### CommonJS\n```javascript\nvar sticky = require('stickynav').Sticky;\nvar stickynav = require('stickynav').StickyNav;\nvar scroll = require('stickynav').Scroll;\n```\n\n## Recipes\n\nCreate an auto-generated sticky navigation from in-page DOM elements:\n\n```html\n<!-- this will become a sticky navigation, populated with nav items that initiate smooth scrolling when clicked -->\n<ul id=\"sticky\"></ul> \n\n...\n\n<main>\n  <section data-nav=\"Introduction\">\n  <section data-nav=\"Overview\">\n  <section data-nav=\"Summary\">\n</main>\n```\n\n```javascript\nnew stickyNav({\n  nav: '#sticky'\n});\n```\n\nOr, just create a sticky element. This one is bounded by its parent (meaning it will unstick along with the bottom edge of its parent), and will become sticky 80px from the top of the viewport:\n\n```javascript\nnew Sticky('#sticky', {\n  boundedBy: true,\n  offset: 80\n}\n```\n\nSmoothly scroll to a particular page section or anchor:\n\n```javascript\nconst intro = document.querySelector('#intro');\n\nscrollPage(intro);\n```\n\n## Options\n### Sticky\n\n| name             | type                 | default | description |\n| ---------------- | -------------------- | ------- | ----------- |\n| element          | HTMLElement          |         | The element to sticky-ify (required). |\n| option.boundedBy | boolean, HTMLElement |         | \"true\" to use the parent node, or a custom bounding element for the sticky element. This affects where / when the sticky will attach and detach | \n| option.offset    | number               | 0         | An offset from the top at which to toggle \"stickiness\" | \n\n### Scroll\n| name       | type        | default | description                                  |\n| ---------- | ----------- | ------- | -------------------------------------------- |\n| to         | HTMLElement |         | The DOM node to scroll to (required)         |\n| offset     | number      | 0       | A scrolling offset                           | \n| callback   | function    |         | Callback function when scrolling is complete | \n\n### StickyNav\n| name             | type                 | default  | description                                  |\n| ---------------- | -------------------- | -------- | -------------------------------------------- |\n| option.nav       | HTMLElement          |          | The DOM node to generate the nav into (required)|\n| option.sections  | string, HTMLElement  | data-nav | A querySelector, or the elements themselves, to be used when generating the menu items in the navigation | \n| option.boundedBy | boolean, HTMLElement | false    | \"true\" to use the parent node, or a custom bounding element for the sticky element. This affects where / when the sticky will attach and detach | \n| option.offset    | number               | 0        | The scroll / sticky offset | \n\n\n## Examples\n\nThere is a [demo](https://apathetic.github.io/showcase/components/stickynav/) is available. Alternatively, after cloning the repo, try:\n\n```\nnpm i\nnpm start\n```\n\nA server will spin up at ```http://localhost:8080```, where you may play with the various examples.\n\n## Support\n* IE8+\n* Safari / Chrome\n* Firefox\n* iOS\n* Android\n\n## License\nMIT","readmeFilename":"README.md"}