https://github.com/greg-md/ng-elevator
Make a container to elevate on the screen while scrolling with Angular.
https://github.com/greg-md/ng-elevator
angular elevator greg-js greg-md javascript js ng ng-elevator scroll scrolling ts typescript
Last synced: about 1 month ago
JSON representation
Make a container to elevate on the screen while scrolling with Angular.
- Host: GitHub
- URL: https://github.com/greg-md/ng-elevator
- Owner: greg-md
- Created: 2016-12-03T14:30:11.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-06-11T11:18:44.000Z (about 8 years ago)
- Last Synced: 2025-02-19T09:03:12.236Z (over 1 year ago)
- Topics: angular, elevator, greg-js, greg-md, javascript, js, ng, ng-elevator, scroll, scrolling, ts, typescript
- Language: TypeScript
- Homepage:
- Size: 122 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ng Elevator
[](https://badge.fury.io/js/%40greg-md%2Fgreg-elevator)
[](https://travis-ci.org/greg-md/greg-elevator)
Make a container to elevate on the screen while scrolling with Angular.
# Table of Contents:
* [Installation](#installation)
* [How It Works](#how-it-works)
* [Component Attributes](#component-attributes)
* [License](#license)
* [Huuuge Quote](#huuuge-quote)
# Installation
```bash
npm install @greg-md/greg-elevator --save
```
# How It Works
### Setting up in a module
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// 1. Import elevator module;
import { ElevatorModule } from '@greg-md/greg-elevator';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
// 2. Register elevator module.
ElevatorModule,
],
declarations: [
AppComponent,
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
### Using in templates
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styles: `
.sidebar {
width: 200px;
height: 500px;
}
`,
template: `
You will see me while scrolling.
`,
})
export class AppComponent { }
```
# Component Attributes
## marginTop
Elevator by default is fixed on the top of the screen while scrolling up.
You could set a margin top for the elevator.
_Example:_
```html
Hello! I am elevating.
```
## marginBottom
If the elevator height is bigger than the screen height,
elevator by default is fixed on the bottom of the screen while scrolling down.
You could set a margin bottom for the elevator.
_Example:_
```html
Hello! I am elevating.
```
# License
MIT © [Grigorii Duca](http://greg.md)
# Huuuge Quote
