Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thisissoon/angular-scrollspy
A simple lightweight library for Angular which automatically updates links to indicate the currently active section in the viewport
https://github.com/thisissoon/angular-scrollspy
angular component directive directives navbar navigation navigationbar ngx ngx-library ngx-scroll-spy ngx-scrollspy scrolling scrollspy
Last synced: 14 days ago
JSON representation
A simple lightweight library for Angular which automatically updates links to indicate the currently active section in the viewport
- Host: GitHub
- URL: https://github.com/thisissoon/angular-scrollspy
- Owner: thisissoon
- License: mit
- Created: 2017-08-31T11:48:42.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-05T12:50:00.000Z (almost 6 years ago)
- Last Synced: 2024-10-18T10:55:44.815Z (29 days ago)
- Topics: angular, component, directive, directives, navbar, navigation, navigationbar, ngx, ngx-library, ngx-scroll-spy, ngx-scrollspy, scrolling, scrollspy
- Language: TypeScript
- Homepage:
- Size: 649 KB
- Stars: 35
- Watchers: 7
- Forks: 15
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular ScrollSpy
[![Build Status][circle-badge]][circle-badge-url]
[![Coverage Status][coveralls-badge]][coveralls-badge-url]
[![Commitizen friendly][commitizen-badge]][commitizen]
[![code style: prettier][prettier-badge]][prettier-badge-url]
A simple lightweight library for [Angular][angular] which automatically updates links to indicate the currently active section in the viewport. Requires [Angular Inviewport][angular-inviewport] to be installed as well.
This is a simple library for [Angular][angular], implemented in the [Angular Package Format v5.0](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.k0mh3o8u5hx).
## Install
`npm i @thisissoon/{angular-scrollspy,angular-inviewport} --save`
`app.module.ts`
```ts
import { InViewportModule } from '@thisissoon/angular-inviewport';
import { ScrollSpyModule } from '@thisissoon/angular-scrollspy';
@NgModule({
imports: [InViewportModule, ScrollSpyModule.forRoot()],
})
export class AppModule {}
```
## Example
A working example can be found in the [src](https://github.com/thisissoon/angular-scrollspy/tree/master/src) folder.
`app.component.html`
```html
content goes here
content goes here
content goes here
content goes here
```
`app.component.css`
```css
a {
color: blue;
transition: color 0.2s ease-in-out;
}
a.active {
color: darkblue;
}
```
## Browser Support
This library makes use of the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) which requires a [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) to work on some browsers.
### Install the polyfill
```bash
npm i intersection-observer
```
Or use yarn
```bash
yarn add intersection-observer
```
### Include the polyfill
Add this somewhere in your `src/polyfills.ts` file
```ts
import 'intersection-observer';
```
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## Making Commits
This repo uses [Commitizen CLI][commitizen] and [Conventional Changelog][conventional-changelog] to create commits and generate changelogs. Instead of running `git commit` run `git cz` and follow the prompts. Changelogs will then be generated when creating new releases by running `npm run release`.
## Making Releases
Run `npm run release` to create a new release. This will use [Standard Version][standard-version] to create a new release. [Standard Version][standard-version] will generate / update the changelog based on commits generated using [Commitizen CLI][commitizen], update the version number following semantic versioning rules and then commit and tag the commit for the release. Simply run `git push --follow-tags origin master`.
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
[circle-badge]: https://https://circleci.com/gh/thisissoon/angular-scrollspy.svg?style=sheild
[circle-badge-url]: https://https://circleci.com/gh/thisissoon/angular-scrollspy
[coveralls-badge]: https://coveralls.io/repos/github/thisissoon/angular-scrollspy/badge.svg?branch=master
[coveralls-badge-url]: https://coveralls.io/github/thisissoon/angular-scrollspy?branch=master
[angular]: https://angular.io/
[angular-inviewport]: https://github.com/thisissoon/angular-inviewport/
[prettier-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=shield
[prettier-badge-url]: https://github.com/prettier/prettier
[conventional-changelog]: https://github.com/conventional-changelog/conventional-changelog
[commitizen]: http://commitizen.github.io/cz-cli/
[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[standard-version]: https://github.com/conventional-changelog/standard-version