{"id":20731082,"url":"https://github.com/greg-md/ng-elevator","last_synced_at":"2026-05-06T09:34:24.938Z","repository":{"id":57114266,"uuid":"75478603","full_name":"greg-md/ng-elevator","owner":"greg-md","description":"Make a container to elevate on the screen while scrolling with Angular.","archived":false,"fork":false,"pushed_at":"2018-06-11T11:18:44.000Z","size":125,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-19T09:03:12.236Z","etag":null,"topics":["angular","elevator","greg-js","greg-md","javascript","js","ng","ng-elevator","scroll","scrolling","ts","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/greg-md.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-03T14:30:11.000Z","updated_at":"2018-06-11T11:18:46.000Z","dependencies_parsed_at":"2022-08-22T10:11:18.239Z","dependency_job_id":null,"html_url":"https://github.com/greg-md/ng-elevator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greg-md%2Fng-elevator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greg-md%2Fng-elevator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greg-md%2Fng-elevator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greg-md%2Fng-elevator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greg-md","download_url":"https://codeload.github.com/greg-md/ng-elevator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243012744,"owners_count":20221613,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","elevator","greg-js","greg-md","javascript","js","ng","ng-elevator","scroll","scrolling","ts","typescript"],"created_at":"2024-11-17T05:13:38.987Z","updated_at":"2026-05-06T09:34:24.905Z","avatar_url":"https://github.com/greg-md.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ng Elevator\n\n[![npm version](https://badge.fury.io/js/%40greg-md%2Fgreg-elevator.svg)](https://badge.fury.io/js/%40greg-md%2Fgreg-elevator)\n[![Build Status](https://travis-ci.org/greg-md/greg-elevator.svg?branch=master)](https://travis-ci.org/greg-md/greg-elevator)\n\nMake a container to elevate on the screen while scrolling with Angular.\n\n# Table of Contents:\n\n* [Installation](#installation)\n* [How It Works](#how-it-works)\n* [Component Attributes](#component-attributes)\n* [License](#license)\n* [Huuuge Quote](#huuuge-quote)\n\n# Installation\n\n```bash\nnpm install @greg-md/greg-elevator --save\n```\n\n# How It Works\n\n### Setting up in a module\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\n// 1. Import elevator module;\nimport { ElevatorModule } from '@greg-md/greg-elevator';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    // 2. Register elevator module.\n    ElevatorModule,\n  ],\n  declarations: [\n    AppComponent,\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n### Using in templates\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  styles: `\n    .sidebar {\n        width: 200px;\n        height: 500px;\n    }\n  `,\n  template: `\n    \u003csection class=\"sidebar\"\u003e\n      \u003cgreg-elevator\u003e\n        You will see me while scrolling.\n      \u003c/greg-elevator\u003e\n    \u003c/section\u003e\n  `,\n})\nexport class AppComponent { }\n```\n\n# Component Attributes\n\n## marginTop\n\nElevator by default is fixed on the top of the screen while scrolling up.\nYou could set a margin top for the elevator.\n\n_Example:_\n\n```html\n\u003cgreg-elevator [marginTop]=\"20\"\u003e\n  Hello! I am elevating.\n\u003c/greg-elevator\u003e\n```\n\n## marginBottom\n\nIf the elevator height is bigger than the screen height,\nelevator by default is fixed on the bottom of the screen while scrolling down.\nYou could set a margin bottom for the elevator.\n\n_Example:_\n\n```html\n\u003cgreg-elevator [marginBottom]=\"20\"\u003e\n  Hello! I am elevating.\n\u003c/greg-elevator\u003e\n```\n\n# License\n\nMIT © [Grigorii Duca](http://greg.md)\n\n# Huuuge Quote\n\n![I fear not the man who has practiced 10,000 programming languages once, but I fear the man who has practiced one programming language 10,000 times. #horrorsquad](http://greg.md/huuuge-quote-fb.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreg-md%2Fng-elevator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreg-md%2Fng-elevator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreg-md%2Fng-elevator/lists"}