ngx-hide-on-scroll's Introduction

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.

Installation

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

Usage

Step 01: Import the NgxHideOnScrollModule to your module.

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 { }

Step 02: Add the `ngxHideOnScroll` directive to your element.

app.component.html

<!-- Example 01 -->
<nav ngxHideOnScroll [classNameWhenHidden]="'nav--hidden'">
  <h2>Navbar</h2>
</nav>

<!-- Example 02 -->
<div class="fixed-footer" ngxHideOnScroll [propertyUsedToHide]="'transform'" [valueWhenHidden]="'translateY(100%)'"
  [valueWhenShown]="'translateY(0%)'">
  <h2>Fixed footer, with transition on hide/show.</h2>
</div>

app.component.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

Inputs

`@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.

Outputs

`@Output()`	Type	Description
eventElementHidden	`EventEmitter<void>`	Emitted when the element is hidden.
eventElementShown	`EventEmitter<void>`	Emitted when the element is shown.

License

MIT

ngx-hide-on-scroll's People

Contributors

Stargazers

Watchers

ngx-hide-on-scroll's Issues

Import Error on Angular 15

I get the following error in my module.ts file:

'NgxHideOnScrollModule' does not appear to be an NgModule class.(-996002)
ngx-hide-on-scroll.module.d.ts(1, 22): This likely means that the library (ngx-hide-on-scroll) which declares NgxHideOnScrollModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Project environment versions:

Ionic CLI : 6.20.6 (C:\Users\User\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.4.1
@angular-devkit/build-angular : 15.0.4
@angular-devkit/schematics : 14.2.10
@angular/cli : 15.0.4
@ionic/angular-toolkit : 6.1.0

Recommend Projects

thejlifex / ngx-hide-on-scroll Goto Github PK