angular-smart-nav

A simple lightweight library for Angular 2/4+ with no other dependencies that detects scroll direction and adds a sn-scrolling-up or sn-scrolling-down class to the element.
0 people use it
Author: 6976199?v=3 thisissoon
Submitted by: 7836746?v=4 edoparearyee

Angular Scroll Collapse

Build Status Coverage Status

A simple lightweight library for Angular (2/4+) with no other dependencies 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.

This is a simple library for Angular, implemented in the Angular Package Format v4.0.

Install

npm i @thisissoon/angular-scroll-collapse --save

app.module.ts

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

@NgModule({ imports: [ ScrollCollapseModule ] }) export class AppModule { } `

Examples

Scroll direction

<nav class="foo" snScrollCollapse> ... </nav>

` .foo { left: 0; height : 100px; position: fixed; right: 0; top: 0; transition: all .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.

<header>...</header> <nav class="foo" snScrollCollapse> ... </nav>

.foo.sn-affix { left: 0; position: fixed; right: 0; top: 0; }

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.

<header class="foo" snScrollCollapse> ... </header>

` .foo { left: 0; height: 100px; position right: 0; top: 0; }

.foo.sn-minimise { height: 50px; } `

Specify debounce time (default: 100ms)

<header class="foo" snScrollCollapse [debounce]="500"> ... </header>

comments powered by Disqus
This page was last updated 4 months ago.