NgxHideOnScroll

 

Hide an element on scroll down or up in Angular.

This library allows you to hide an html element (e.g. navbar) on scroll down and show it again on scroll up.

View the demo

Installation

``sh
npm install ngx-hide-on-scroll --save
`

Usage

$3

`ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

// Import NgxHideOnScrollModule
import { NgxHideOnScrollModule } from 'ngx-hide-on-scroll';

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
NgxHideOnScrollModule // Import NgxHideOnScrollModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`

$3

app.component.html
`html

[valueWhenShown]="'translateY(0%)'">

Fixed footer, with transition on hide/show.

`
app.component.scss
`scss
// Example 01
nav {
position: fixed;
top: 0;
width: 100%;
color: white;
background-color: #2980b9;
padding: 0 2rem;
}

nav.nav--hidden {
transform: translateY(-100%);
}
// End - Example 01

// Example 02
.fixed-footer {
position: fixed;
bottom: 0;
width: 100%;
color: white;
background-color: #2c3e50;
padding: 0 2rem;

transition: transform 0.3s ease-in-out; // Transition on hide/show.
}
`

Documentation

$3

| @Input() | Type | Required | Default | Description |
|--------------------------|------------------------------------------------------|----------|-----------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| hideOnScroll | 'Down' \| 'Up' | optional | 'Down' | 'Down': The element will be hidden on scroll down and it will be shown again on scroll up.
'Up': The element will be hidden on scroll up and it will be shown again on scroll down. |
| classNameWhenHidden | string | optional | none | CSS class name added to the element to hide it. When this property is set, propertyUsedToHide, valueWhenHidden, and valueWhenShown have not effect. |
| propertyUsedToHide | 'transform' \| 'top' \| 'bottom' \| 'height' | optional | 'transform' | The CSS property used to hide/show the element. |
| valueWhenHidden | string | optional | 'translateY(-100%)' | The value of the propertyUsedToHide when the element is hidden. |
| valueWhenShown | string | optional | 'translateY(0)' | The value of the propertyUsedToHide when the element is shown. |
| scrollingElementSelector | string | optional | none | The selector of the element you want to listen the scroll event, in case it is not the browser default scrolling element (document.scrollingElement or document.documentElement). For example '.mat-sidenav-content' if you are using Angular Material Sidenav. |

$3

| @Output() | Type | Description |
|--------------------|--------------------|-------------------------------------|
| eventElementHidden | EventEmitter | Emitted when the element is hidden. |
| eventElementShown | EventEmitter` | Emitted when the element is shown. |

License

MIT