{"_id":"@bitovi/sticky-nav","_rev":"20-11f4372fe9ebd08c6c1314d8b2efd779","name":"@bitovi/sticky-nav","dist-tags":{"pre":"0.0.11-pre.3","latest":"0.0.11-pre.3"},"versions":{"0.0.11-pre.3":{"name":"@bitovi/sticky-nav","version":"0.0.11-pre.3","keywords":["navigation","header","nav","navbar","sticky","floating"],"author":{"url":"http://bitovi.com","name":"bitovi","email":"contact@bitovi.com"},"license":"MIT","_id":"@bitovi/sticky-nav@0.0.11-pre.3","maintainers":[{"name":"jazzy_michael","email":"thejazzymichael@gmail.com"},{"name":"justinbmeyer","email":"justin@bitovi.com"},{"name":"cherif_b","email":"cherif.bouchelaghem@gmail.com"},{"name":"connorg","email":"connormwg@gmail.com"}],"homepage":"https://github.com/bitovi/sticky-nav#readme","bugs":{"url":"https://github.com/bitovi/sticky-nav/issues"},"dist":{"shasum":"ecd68066dbd13676fdd39c9ff3698a228408e0c9","tarball":"https://registry.npmjs.org/@bitovi/sticky-nav/-/sticky-nav-0.0.11-pre.3.tgz","fileCount":4,"integrity":"sha512-MYE1cDxiE8HEtIchkgc/z321sW2KBjw54TP018Qyo3ZXsiI61vDfNs/hi08tcis0r2+ZVtKajD0eeUORbMr4iA==","signatures":[{"sig":"MEYCIQCUV66XvjWhTveNHHkw2FZYqBcBSWZadkcowXdN2Q4gTgIhAJAaEw3SWS4KPi+TGUgAVnJ7F4IaCZH0ugCTlcO8KuBQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKdECRA9TVsSAnZWagAA390P/08WGlHwHAtgtax9FL9a\nwPwCVQlM+rwXCOwp4V4vWT0oJCaJsf3zOPHkom1xrPlLI7kf9JyqtL33Lg4j\nM1bkFa3MciJz5A97Bnpm5KdPVnahG2UIKtw/TTfggw4EfBXBTH8iQEdJiRVe\nwmrl93OAbEx9gfkJI1HCFpULsBjHcBBaFojJSXMqS4fLpX1O4LzjF0wN32Oa\nFRBE1bz3fuUhJ+X7hoslBjSMrnAj4wdpR3TpPPt9s6boQyzlnVU5TJwi+mFn\ndpwoty8ToKeHpnNmx5N0RYGWlENBvI+BevklxO+rNi/XNPNk+4zfejc1QeT4\nu4oL8K+uRTv492PGYKhLNNM1olgC0s3GjeKCx+SJXCY83TzV3sAZkymxPIu6\nHVs4S43xvPY84Sw5+5q6R2O0pijbljMLFUvlvkeJkE+5KEQ9gDUHoOYd1YMl\nesHNuDhhWriaSMvN11JQ5aq2ze/ZwLVOxPC26/XkZVutO5vu6NuD7rAfvZEF\n4/KAVcUH1HZOQL+lmjZCcjFOysJUtXlNakZDezJndV3h2ScJ585TNRNaGuRM\nssibsKcZW5ht8jpXeH5Ogo3fgUQc9RpSfKIuFHQL5mqKSZJ0nTFUI8I1OrLz\nONin9ryirGP1axjfzKv5JxOsEp8Jgsp5IbjIK+9qI4axvcmh8DnJowDbctSD\n76pn\r\n=kEdG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"/src/index.js","type":"module","config":{},"module":"/src/index.js","gitHead":"852f8598a29276b4d1e0bc96c57bafd89ca7e97d","private":false,"scripts":{"link":"sudo npm link","lint":"eslint **/*.js","preversion":"npm run lint && npm run cypress:run","cypress:run":"npx cypress run","release:pre":"npm version prerelease && npm publish --tag=pre --access=public","cypress:open":"npx cypress open","release:major":"npm version major && npm publish","release:minor":"npm version minor && npm publish","release:patch":"npm version patch && npm publish"},"_npmUser":{"name":"jazzy_michael","email":"thejazzymichael@gmail.com"},"repository":{"url":"git+https://github.com/bitovi/sticky-nav.git","type":"git"},"_npmVersion":"6.14.6","description":"Just drop it in to enable quick navigation to sections of your page.","directories":{},"_nodeVersion":"12.18.3","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^7.22.0","cypress":"^6.8.0","eslint-plugin-node":"^11.1.0","eslint-config-bitovi":"^0.1.3","eslint-plugin-import":"^2.22.1","eslint-plugin-promise":"^4.3.1"},"_npmOperationalInternal":{"tmp":"tmp/sticky-nav_0.0.11-pre.3_1617733443962_0.38945780426540755","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-04-06T18:24:03.716Z","modified":"2026-05-21T14:19:11.649Z","0.0.11-pre.3":"2021-04-06T18:24:04.070Z"},"bugs":{"url":"https://github.com/bitovi/sticky-nav/issues"},"author":{"url":"http://bitovi.com","name":"bitovi","email":"contact@bitovi.com"},"license":"MIT","homepage":"https://github.com/bitovi/sticky-nav#readme","keywords":["navigation","header","nav","navbar","sticky","floating"],"repository":{"url":"git+https://github.com/bitovi/sticky-nav.git","type":"git"},"description":"Just drop it in to enable quick navigation to sections of your page.","maintainers":[{"email":"justin@bitovi.com","name":"justinbmeyer"},{"email":"cherif.bouchelaghem@gmail.com","name":"cherif_b"},{"email":"alyshouman@gmail.com","name":"alishouman"},{"email":"os@bitovi.com","name":"bitovi-os"},{"email":"kylebnazario@gmail.com","name":"kyle-n"},{"email":"mhaynie@bitovi.com","name":"mhaynie_bitovi"},{"email":"brad@bitovi.com","name":"bmomberger-bitovi"},{"email":"fabioemoutinho@gmail.com","name":"fabioemoutinho"},{"email":"rich@limnous.com","name":"rlmcneary2"},{"email":"jennifer.wadella@gmail.com","name":"tehfedaykin"},{"email":"kphillips86@gmail.com","name":"phillipskevin"},{"email":"mick.mc.13@gmail.com","name":"mickmcgrath13"},{"email":"core@donejs.com","name":"bitovi-core-os"},{"email":"jane@bitovi.com","name":"janebitovi"},{"email":"DanD.Tran89@gmail.com","name":"dandamantran89"},{"email":"sandover@gmail.com","name":"sandover"}],"readme":"# sticky-nav\n\nA web component for navigating to sections of your page that can stick as you scroll.\n\n## Setup\n\nIf you are using a module loader, you can install the web component with NPM like:\n\n```shell\nnpm install @bitovi/sticky-nav\n```\n\nImport the web component:\n\n```js\nimport \"../../node_modules/@bitovi/sticky-nav\";\n```\n\n## Use\n\n\nTo use, just insert the HTML element tag created by the package.\n\n```html\n<sticky-nav></sticky-nav>\n```\n\nThat's it.\n\n## Changing Default Configuration\n\nYou can optionally provide attributes to the component to customize your experience. Here are the _default_ attribute values.\n\n```html\n<sticky-nav \n    stick=\"true\",\n    scrollable-container-selector=\"window\"\n    heading-selector=\"h2\"\n></sticky-nav>\n```\n\n### Attributes\n\n### _stick_\n\n- required: `false`\n- type: `boolean`\n- default: `\"true\"`\n\nThe `stick` attribute determines whether the `sticky-nav-fixed` class gets added to the <sticky-nav> element when you scroll passed it. This class defaults to having a `fixed` position style property. By default, it will assume the consuming application wants a sticky navbar.\n\n```html\n<sticky-nav sticky=\"false\"></sticky-nav>\n```\n\n### _scrollable-container-selector_\n\n- required: `false`\n- type: `string`\n- default: `\"sticky-nav\"`\n\n\nThe `scrollable-container-selector` attribute is the tag (HTML element, class, or ID) contains the section headings that you want to scroll to. By default, it will be the window.\n\n```html\n<sticky-nav scrollable-container-selector=\".header\"></sticky-nav>\n```\n\n### _heading-selector_\n\n- required: `false`\n- type: `string`\n- default: `\"h2\"`\n\nThe `heading-selector` attribute is the tag (HTML element, class, or ID) that will be used to create the navbar items. By default, it will scour the `<body>` for H2 tags.\n\n```html\n<sticky-nav heading-selector=\"h3\"><sticky-nav>\n```\n\n## Custom Styles\n\nYou can override or modify the default styles by using the provided IDs and classes. The component is structured like the following:\n\n```html\n    <sticky-nav>\n        <ul class=\"sticky-nav-inner\">\n            ...\n            <ul class=\"sticky-nav-item\">\n                <a>Heading Example 1</a>\n            </ul>\n            ...\n            <ul class=\"sticky-nav-item\">\n                <a>Heading Example 2</a>\n            </ul>\n            ...\n        </div>\n    </sticky-nav>\n```\n\n### Navbar Wrapper\n\nTo customize the styles of the navbar container, use the following tag in your styles:\n\n```css\n    sticky-nav {}\n```\n\nIf you have not disabled the `sticky` attribute; a `sticky-nav-fixed` class will be added to the `<sticky-nav>` element as the user scrolls passed the menu. By default, the `sticky-nav-fixed` class adds a `position: fixed;` to the styles of the `<sticky-nav>` element.\n\nIf you want to customize this behavior, access the `sticky-nav-fixed` class on the `<sticky-nav>` element:\n\n```css\n    sticky-nav.sticky-nav-fixed {}\n```\n\n### Navbar Inner Container\n\nTo customize the styles of the navbar inner container (which is scrolled by the outer container), use the following ID in your styles:\n\n```css\n    sticky-nav>ul {}\n```\n\n### Navbar Items\n\nTo customize the styles of the navbar's items, use the following class in your styles:\n\n```css\n    sticky-nav>ul>li {}\n```\n\nIf you want to customize the `active` state of a nav item, use the following class in your styles:\n\n```css\n    sticky-nav>ul>li.sticky-nav-active {}\n```\n\nThe `sticky-nav-active` class is added whenever the section represented by the nav item is in or below the top 1/3 of the page and above of the next section in the page. The `sticky-nav-active` class will only be applied to one item at a time.\n\n## Notes\n\n### Using TypeScript + TSX\n\nYou may get the following linting error on the web component: `Property 'sticky-nav' does not exist on type 'JSX.IntrinsicElements'`. To fix this, add the following snippet to your `declarations.d.ts` file.  \n\n```ts\n// In ~/declarations.d.ts\n\ndeclare namespace JSX {\n    // ...\n  interface IntrinsicElements {\n      // ...\n    \"sticky-nav\": any;\n  }\n}\n```","readmeFilename":"README.md"}