Hide an element on scroll down or up in Angular.
npm install ngx-hide-on-scrollsh
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