{"id":13481457,"url":"https://github.com/JonnyBGod/ngx-scrollspy","last_synced_at":"2025-03-27T12:30:53.990Z","repository":{"id":65411341,"uuid":"53913470","full_name":"JonnyBGod/ngx-scrollspy","owner":"JonnyBGod","description":"Angular ScrollSpy Service","archived":false,"fork":false,"pushed_at":"2018-08-22T17:46:17.000Z","size":282,"stargazers_count":94,"open_issues_count":19,"forks_count":21,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-05-22T04:31:21.450Z","etag":null,"topics":["affix","angular","angular2","angular2-service","aot","index-generator","infinite-scroll","ng2-scrollspy","ngx-scrollspy","parallax","parallax-scrolling","scrollspy","sticky"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/JonnyBGod.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2016-03-15T04:03:01.000Z","updated_at":"2023-05-15T10:37:39.000Z","dependencies_parsed_at":"2023-01-22T06:55:17.354Z","dependency_job_id":null,"html_url":"https://github.com/JonnyBGod/ngx-scrollspy","commit_stats":null,"previous_names":["jonnybgod/ng2-scrollspy"],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonnyBGod%2Fngx-scrollspy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonnyBGod%2Fngx-scrollspy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonnyBGod%2Fngx-scrollspy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonnyBGod%2Fngx-scrollspy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JonnyBGod","download_url":"https://codeload.github.com/JonnyBGod/ngx-scrollspy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245844838,"owners_count":20681787,"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":["affix","angular","angular2","angular2-service","aot","index-generator","infinite-scroll","ng2-scrollspy","ngx-scrollspy","parallax","parallax-scrolling","scrollspy","sticky"],"created_at":"2024-07-31T17:00:51.992Z","updated_at":"2025-03-27T12:30:53.648Z","avatar_url":"https://github.com/JonnyBGod.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"[![npm version](https://img.shields.io/npm/v/ngx-scrollspy.svg?style=flat)](https://www.npmjs.com/package/ngx-scrollspy)\n[![Build Status](https://img.shields.io/travis/JonnyBGod/ngx-scrollspy/master.svg?style=flat)](https://travis-ci.org/JonnyBGod/ngx-scrollspy)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/fc203d3b26f745b4af0251228dde6b2e)](https://www.codacy.com/app/jonnybgod/ngx-scrollspy?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=JonnyBGod/ngx-scrollspy\u0026amp;utm_campaign=Badge_Grade)\n[![Coverage Status](https://coveralls.io/repos/github/JonnyBGod/ngx-scrollspy/badge.svg?branch=master)](https://coveralls.io/github/JonnyBGod/ngx-scrollspy?branch=master)\n[![devDependency Status](https://david-dm.org/JonnyBGod/ngx-scrollspy/dev-status.svg)](https://david-dm.org/JonnyBGod/ngx-scrollspy#info=devDependencies)\n\n[![NPM downloads](https://img.shields.io/npm/dm/ngx-scrollspy.svg)](https://npmjs.org/package/ngx-scrollspy)\n\nYou can use this angular2 service to spy scroll events from ```window``` or any other scrollable element.\n\nThis library implements an service to collect observables from scroll spy directives. It can be used to create you own components or if you prefer use on of the following components that leverage this library functionality to accomplish different behaviors:\n\n* **index**: create and display and index from content inside and element.\n* **affix**: make element follow scroll inside its parent.\n* **parallax**: create very simple parallax effects based on scroll.\n* **infinite**: infinite scroll\n\n# Repository change\n\nPlease not that the repository and npm package changed from *ng2-scrollspy* to *ngx-scrollspy*\n\n## Installation\nFirst you need to install the npm module:\n```sh\nnpm install ngx-scrollspy --save\n```\n\nIf you use SystemJS to load your files, you might have to update your config with this if you don't use `defaultJSExtensions: true`:\n```js\nSystem.config({\n\tpackages: {\n\t\t\"ngx-scrollspy\": {\"defaultExtension\": \"js\"}\n\t}\n});\n```\n\nFinally, you can use ngx-scrollspy in your Angular 2 project.\nIt is recommended to instantiate `ScrollSpyService` in the bootstrap of your application and to never add it to the \"providers\" property of your components, this way you will keep it as a singleton.\nIf you add it to the \"providers\" property of a component it will instantiate a new instance of the service that won't be initialized.\n\n```js\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { ScrollSpyModule } from 'ngx-scrollspy';\n\n@NgModule({\n  imports: [\n  \tBrowserModule,\n  \tScrollSpyModule.forRoot()\n  ],\n  declarations: [ AppComponent ], \n  bootstrap: [ AppComponent ]\n})\n```\n\n## Using\n\n#### Spy window scroll\n\nUse ```ScrollSpyDirective``` to spy on window.\n\n```js\nimport { NgModule, Component, Injectable, AfterViewInit } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { ScrollSpyModule, ScrollSpyService } from 'ngx-scrollspy';\n\n@Injectable()\n@Component({\n\tselector: 'app',\n\ttemplate: `\u003cdiv scrollSpy\u003e\u003c/div\u003e`\n})\nexport class AppComponent implements AfterViewInit {\n\tconstructor(private scrollSpyService: ScrollSpyService) {}\n\n\tngAfterViewInit() {\n\t\tthis.scrollSpyService.getObservable('window').subscribe((e: any) =\u003e {\n\t\t\tconsole.log('ScrollSpy::window: ', e);\n\t\t});\n\t}\n}\n\n@NgModule({\n  imports: [\n  \tBrowserModule,\n  \tScrollSpyModule.forRoot()\n  ],\n  declarations: [\n  \tAppComponent\n  ], \n  bootstrap: [ AppComponent ]\n})\n```\n\n#### Spy any element scroll\n\nUse ```ScrollSpyElementDirective``` to spy on any element. You must give an unique id to each instance.\n\n```js\nimport { NgModule, Component, Injectable, AfterViewInit } from '@angular/core';\nimport { ScrollSpyModule, ScrollSpyService } from 'ngx-scrollspy';\n\n@Injectable()\n@Component({\n\tselector: 'yourComponent',\n\ttemplate: `\n\t\u003cdiv scrollSpyElement=\"test\" style=\"max-height: 100px; overflow: auto;\"\u003e\n\t\t\u003cdiv style=\"height: 500px;\"\u003e\u003c/div\u003e\n\t\u003c/div\u003e`\n})\nexport class YourComponent implements AfterViewInit {\n\n\tconstructor(private scrollSpyService: ScrollSpyService) {}\n\n\tngAfterViewInit() {\n\t\tthis.scrollSpyService.getObservable('test').subscribe((e: any) =\u003e {\n\t\t\tconsole.log('ScrollSpy::test: ', e);\n\t\t});\n\t}\n}\n\n@NgModule({\n  imports: [\n\t\tScrollSpyModule\n  ],\n  declarations: [\n  \tAppComponent\n  ], \n  providers: [ ] \n})\nexport class YourModule { }\n```\n\nBecause ```ScrollSpyService``` is a singleton, you can get any ScrollSpy observable from anywhere withing your application.\n\n# TODO:\n\n* Documentation/examples webpage\n* Finish unit tests\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJonnyBGod%2Fngx-scrollspy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJonnyBGod%2Fngx-scrollspy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJonnyBGod%2Fngx-scrollspy/lists"}