Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matheo/ngx-sticky-kit
Angular solution that allows to stick the elements such as header, menu, sidebar or any other block on the page.
https://github.com/matheo/ngx-sticky-kit
Last synced: about 1 month ago
JSON representation
Angular solution that allows to stick the elements such as header, menu, sidebar or any other block on the page.
- Host: GitHub
- URL: https://github.com/matheo/ngx-sticky-kit
- Owner: matheo
- Created: 2023-06-09T03:48:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-05T05:42:41.000Z (about 1 year ago)
- Last Synced: 2024-10-11T15:16:16.322Z (3 months ago)
- Language: HTML
- Size: 390 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- trackawesomelist - ngx-sticky-kit (⭐2) - Angular Sticky makes HTML elements sticky. For instance, the header, the menu, the sidebar or any other block can be stuck at the desired position. (Recently Updated / [Aug 26, 2024](/content/2024/08/26/README.md))
- awesome-angular - ngx-sticky-kit - Angular Sticky makes HTML elements sticky. For instance, the header, the menu, the sidebar or any other block can be stuck at the desired position. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-sticky-kit - Angular Sticky makes HTML elements sticky. For instance, the header, the menu, the sidebar or any other block can be stuck at the desired position. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-sticky-kit - Angular Sticky makes HTML elements sticky. For instance, the header, the menu, the sidebar or any other block can be stuck at the desired position. (Table of contents / Third Party Components)
README
# ngx-sticky-kit
Angular Sticky makes HTML elements sticky. For instance, the header, the menu, the sidebar or any other block can be stuck at the desired position.
## Installation
Install with npm:
```bash
npm install ngx-sticky-kit --save
```
Initial development environment:
```bash
npm install
npm run build
```
Run demo application:
```bash
npm start
```
## Usage
**[sticky]** - makes an element sticky
Sticky element
Sticky div
**[sticky-orientation]** : (_default "none"_) - orientation for sticky element ("left", "right", "none")
**[sticky-zIndex]** : (_default 10_) - controls z-index CSS parameter of the sticky element
Sticky element
**[sticky-width]** : (_default "auto"_) - width of the sticky element
**[sticky-offset-top]** : (_default 0_) - pixels between the top of the page or container and the element
**[sticky-offset-bottom]** : (_default 0_) - pixels between the bottom of the page or container and the element
Sticky element
**[sticky-start]** : (_default 0_) - position where the element should start to stick
Sticky element
**[sticky-class]** : (_default "sticky"_) - CSS class that will be added after the element starts sticking
**[sticky-end-class]** : (_default "sticky-end"_) - CSS class that will be added to the sticky element after it ends sticking
**[sticky-media-query]** : (_default ""_) - media query that allows to use sticky
**[sticky-parent]** : (_default true_) - if true, then the sticky element will be stuck relatively to the parent containers. Otherwise, _window_ will be used as the parent container.
> NOTE: the "position: relative" styling is added to the parent element automatically in order to use the absolute positioning
## Example
```typescript
// app.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {StickyModule} from 'ngx-sticky-kit';
import {AppComponent} from './app.component';
@NgModule({
imports: [
BrowserModule,
StickyModule
],
declarations: [
AppComponent
],
bootstrap: [
AppComponent
]
})
export class AppModule { }
```
```typescript
// app.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'app',
template: '
demo',
})
export class DemoComponent { }
```