Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/thisissoon/angular-scroll-collapse

A simple lightweight library for Angular that detects scroll direction and adds a sn-scrolling-up or sn-scrolling-down class to the element. The library can also detect when the user has scrolled passed the element and apply a sn-affix class. Useful for make a element sticky when the user has scrolled beyond it. This library can will also apply sn-minimise class after the user has scrolled beyond the height of the element
https://github.com/thisissoon/angular-scroll-collapse

affix affix-on-scroll-beyond angular collapse collapse-on-scroll directive nav navbar ngx ngx-library ngx-nav ngx-sticky-nav ngx-translate scrolling sticky sticky-navigation-bar

Last synced: 6 days ago
JSON representation

Host: GitHub
URL: https://github.com/thisissoon/angular-scroll-collapse
Owner: thisissoon
License: mit
Created: 2015-11-02T16:43:21.000Z (about 9 years ago)
Default Branch: master
Last Pushed: 2018-11-22T09:59:16.000Z (almost 6 years ago)
Last Synced: 2024-11-08T02:27:08.759Z (8 days ago)
Topics: affix, affix-on-scroll-beyond, angular, collapse, collapse-on-scroll, directive, nav, navbar, ngx, ngx-library, ngx-nav, ngx-sticky-nav, ngx-translate, scrolling, sticky, sticky-navigation-bar
Language: TypeScript
Homepage:
Size: 1.21 MB
Stars: 5
Watchers: 7
Forks: 3
Open Issues: 1
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        # Angular Scroll Collapse

[![CircleCI][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] that detects scroll direction and adds a `sn-scrolling-up` or `sn-scrolling-down` class to the element. The library can also detect when the user has scrolled passed the element and apply a `sn-affix` class. Useful for make a element sticky when the user has scrolled beyond it. This library can will also apply `sn-minimise` class after the user has scrolled beyond the height of the element.

Appropriate events for the above classes are also emitted.

This is a simple library for [Angular][angular], implemented in the [Angular Package Format v5.0][apfv5].

## Install

### via NPM

`npm i @thisissoon/{angular-scroll-collapse,angular-inviewport} --save`

### via Yarn

`yarn add @thisissoon/angular-scroll-collapse @thisissoon/angular-inviewport`

`app.module.ts`

```ts

import { InViewportModule } from '@thisissoon/angular-inviewport';

import { ScrollCollapseModule } from '@thisissoon/angular-scroll-collapse';

@NgModule({

  imports: [InViewportModule, ScrollCollapseModule],

})

export class AppModule {}

```

`app.server.module.ts`

```ts

import { InViewportModule } from '@thisissoon/angular-inviewport';

import { ScrollCollapseModule } from '@thisissoon/angular-scroll-collapse';

@NgModule({

  imports: [InViewportModule.forServer(), ScrollCollapseModule],

})

export class AppServerModule {}

```

## Examples

A working example can be found inside [here](https://github.com/thisissoon/angular-scroll-collapse/tree/master/src).

### Scroll direction

```html

  ...

```

```css

.foo {

  height: 100px;

  left: 0;

  position: fixed;

  right: 0;

  top: 0;

  transition: all 0.35s ease-in-out;

}

.foo.sn-scrolling-down {

  transform: translateY(-100px);

}

.foo.sn-scrolling-up {

  transform: translateY(0);

}

```

### Affix mode

In this scenario the nav element will have the class `sn-affix` added when the user scrolls past the header element and the nav is at the top of the viewport.

```html

...

  ...

```

```css

.foo.sn-affix {

  left: 0;

  position: fixed;

  right: 0;

  top: 0;

}

```

A `[yOffset]` can also be applied. Here `sn-affix` will be added when the top of the viewport is within 200 pixels of the top of the nav.

```html

...

  ...

```

### Minimise mode

In this scenario the nav element will have the class `sn-minimise` added when the user scrolls 100px (the original height of the element) down the page.

```html

  ...

```

```css

.foo {

  height: 100px;

  left: 0;

  position: fixed;

  right: 0;

  top: 0;

}

.foo.sn-minimise {

  height: 50px;

}

```

### Specify debounce time (default: 0ms)

```html

  ...

```

## 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][karma].

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor][protractor].

## 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][angular-cli-readme].

[circle-badge]: https://circleci.com/gh/thisissoon/angular-scroll-collapse.svg?style=shield

[circle-badge-url]: https://circleci.com/gh/thisissoon/angular-scroll-collapse

[coveralls-badge]: https://coveralls.io/repos/github/thisissoon/angular-scroll-collapse/badge.svg?branch=master

[coveralls-badge-url]: https://coveralls.io/github/thisissoon/angular-scroll-collapse?branch=master

[prettier-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=shield

[prettier-badge-url]: https://github.com/prettier/prettier

[angular]: https://angular.io/

[commitizen]: http://commitizen.github.io/cz-cli/

[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg

[conventional-changelog]: https://github.com/conventional-changelog/conventional-changelog

[standard-version]: https://github.com/conventional-changelog/standard-version

[karma]: https://karma-runner.github.io

[protractor]: http://www.protractortest.org/

[angular-cli]: https://github.com/angular/angular-cli

[angular-cli-readme]: https://github.com/angular/angular-cli/blob/master/README.md

[apfv5]: https://goo.gl/jB3GVv