{"id":27555899,"url":"https://github.com/sidsbrmnn/scrollspy","last_synced_at":"2025-04-19T17:55:43.412Z","repository":{"id":42486147,"uuid":"273925710","full_name":"sidsbrmnn/scrollspy","owner":"sidsbrmnn","description":"A lightweight JavaScript library to automatically update navigation components based on scroll position indicating the currently active link in the viewport.","archived":false,"fork":false,"pushed_at":"2024-08-30T23:54:34.000Z","size":1422,"stargazers_count":39,"open_issues_count":6,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T06:08:41.156Z","etag":null,"topics":["hacktoberfest","javascript","lightweight-javascript-library","navigation","scrollspy"],"latest_commit_sha":null,"homepage":"https://sidsbrmnn.github.io/scrollspy","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sidsbrmnn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-21T14:56:10.000Z","updated_at":"2025-02-28T17:44:58.000Z","dependencies_parsed_at":"2024-06-19T04:09:47.998Z","dependency_job_id":"c928341f-ba0d-4950-a7bf-96aaac7d8263","html_url":"https://github.com/sidsbrmnn/scrollspy","commit_stats":{"total_commits":57,"total_committers":3,"mean_commits":19.0,"dds":0.3508771929824561,"last_synced_commit":"0aba218b171d95b5a0d4c002fecae86b8aba9aa5"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidsbrmnn%2Fscrollspy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidsbrmnn%2Fscrollspy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidsbrmnn%2Fscrollspy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidsbrmnn%2Fscrollspy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sidsbrmnn","download_url":"https://codeload.github.com/sidsbrmnn/scrollspy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249754142,"owners_count":21320732,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","javascript","lightweight-javascript-library","navigation","scrollspy"],"created_at":"2025-04-19T17:55:42.269Z","updated_at":"2025-04-19T17:55:43.402Z","avatar_url":"https://github.com/sidsbrmnn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @sidsbrmnn/scrollspy\n\n[![npm version](https://badge.fury.io/js/@sidsbrmnn%2Fscrollspy.svg)](https://badge.fury.io/js/@sidsbrmnn%2Fscrollspy)\n\nA simple lightweight JavaScript library without jQuery or any other dependencies to handle scroll spying on static webpages.\n\n## Install\n\n1. via NPM\n\n    Install it using npm\n\n    ```bash\n    npm install --save @sidsbrmnn/scrollspy\n    ```\n\n2. Use the minified script from unpkg.com\n\n    ```html\n    \u003cscript src=\"https://unpkg.com/@sidsbrmnn/scrollspy@1.x/dist/scrollspy.min.js\"\u003e\u003c/script\u003e\n    ```\n\n## Usages\n\nEasy for using, syntax just like this:\n\n```html\nscrollSpy(menu, options)\n```\n\nThis little plugin will add `active` class into your existing menu item when you scroll your page to a matched section by ID.\nIf you are giving it a try, make sure that you:\n\n1. Added CSS for `active` class in your menu item. Because, this plugin do NOT include CSS.\n\n2. Create your sections.\n\n    Example: `\u003csection id=\"first-section\"\u003e...\u003c/section\u003e`\n\n3. Added an attribute which is an section ID into your menu items. Default is `href`.\n\n    Example: `\"href\"=\"#first-section\"`.\n    You also replace `href` with the other name by `hrefAttribute` in `options`.\n\n### Arguments\n\n1. The `menu` is query selector to your menu. It is `string` or `HTMLElement` instance.\n\n2. The `options` is optional. It is type of `object` which contains properties below:\n\n| Name               | Type     | Default       | Description                                                                                                      |\n|--------------------|:---------|:--------------|:-----------------------------------------------------------------------------------------------------------------|\n| `sectionSelector`  | string   | `section`     | Query selector to your sections                                                                                  |\n| `targetSelector`   | string   | `a`           | Element will be added active class                                                                               |\n| `offset`           | number   | 0             | Offset number                                                                                                    |\n| `hrefAttribute`    | string   | `href`        | The menu item's attribute name which contains section ID                                                         |\n| `activeClass`      | string   | `active`      | Active class name will be added into `targetSelector`                                                            |\n| `onActive`         | function | null          | A callback method that's called with the current menuItem and section `onActive: function(menuItem, section) {}` |\n\n### ES6\n\n```js\nimport scrollSpy from '@sidsbrmnn/scrollspy'\n\nconst options = {\n    sectionSelector: 'section',  // Query selector to your sections\n    targetSelector: '.nav-link', // Query selector to your elements that will be added `active` class\n    offset: 100                  // Menu item will active before scroll to a matched section 100px\n}\n\n// Initialize\nscrollSpy(document.getElementById('navMain'), options)\n\n// Shorter way\nscrollSpy('#navMain', options)\n```\n\n### Script tag\n\n```html\n\u003cscript src=\"/path/to/dist/scrollspy.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    window.onload = function () {\n        scrollSpy('#navMain', {\n            sectionSelector: 'section',\n            targetSelector: '.nav-link',\n            offset: 100\n        });\n    }\n\n\u003c/script\u003e\n```\n\n## Licence\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsidsbrmnn%2Fscrollspy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsidsbrmnn%2Fscrollspy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsidsbrmnn%2Fscrollspy/lists"}