ngx-sticky-navbar is an Angular 6+ component that wrapps your navigation and it has some cool features.
You can set sensitivity of scroll speed when to show/hide navbar. Example of sensitivity configuration:
settings: Settings = {
sensitivity: {
top: DefinedSensitivity.veryLow,
bottom: DefinedSensitivity.veryHigh
}
};
To setup sensitivitity You can use defined sensitivities (more details) or just pass a number. Greater number lowers sensitivity (0 = high sensitivity, 100 = low sensitivity).
Everytime user scroll back to the top, the navbar becomes visible. You can configure the top offset when it should appear. There two ways:
- Setup offset top manually
settings: Settings = {
scroll: {
offset: {
top: 300 // default is 300
}
}
};
- Setup offset top automatically. It will set top property automatically and dynamically to height of navbar element.
settings: Settings = {
scroll: {
offset: {
autoTop: true // default is false
}
}
};
As ngx-sticky-navbar uses CSS position:fixed, so element wrapped by this component doesn't affect DOM height. You can compensate it by creating Spacer with height manually or automatically set at selected DOM element. To create Spacer You need three properties: height or autoHeight, Type, Element (more details).
- Manual height of Spacer:
ngAfterViewInit() {
this.settings = {
...this.settings,
height: 300,
type: SpacerTypes.PADDING,
element: this.spacerElement,
}
};
this.navbarService.mergeSettingObject(this.settings);
}
- Automatic height of Spacer:
ngAfterViewInit() {
this.settings = {
...this.settings,
spacer: {
autoHeight: true,
type: SpacerTypes.PADDING,
element: this.spacerElement,
}
};
this.navbarService.mergeSettingObject(this.settings);
}
- Pass settings object via property binding (required usage) link
- Dynamically updating global variable settings object link
Component requires Angular and Rxjs version >= 6.0.0.
Check the link
- npm:
$ npm install ngx-sticky-navbar
- yarn:
$ yarn add ngx-sticky-navbar
import { NgxStickyNavbarModule } from 'ngx-sticky-navbar';
@NgModule({
declarations: [...],
imports: [
...
NgxStickyNavbarModule
],
providers: []
})
import {
Settings,
DefinedSensitivity
} from 'ngx-sticky-navbar';
@Component(...)
export class SomeComponent {
...
settings: Settings = {
scroll: {
element: '.scrollable'
},
sensitivity: {
top: DefinedSensitivity.veryLow, // or 50
bottom: DefinedSensitivity.veryHigh // or 10
}
};
import {
...
SpacerTypes,
NgxStickyNavbarService
} from 'ngx-sticky-navbar';
@Component(...)
export class SomeComponent {
@ViewChild('spacerElement') spacerElement: ElementRef;
...
constructor(private navbarService: NgxStickyNavbarService) {...}
ngAfterViewInit() {
this.settings = {
...this.settings,
// Auto Height
spacer: {
autoHeight: true,
type: SpacerTypes.PADDING,
element: this.spacerElement,
}
// Manual Height
spacer: {
height: 300,
type: SpacerTypes.PADDING,
element: this.spacerElement,
}
};
this.navbarService.mergeSettingObject(this.settings);
}
}
<ngx-sticky-navbar [settings]="settings">
<div class="nav"> ... </div>
</ngx-sticky-navbar>
<div class="scrollable">
<div class="scrollable__big-element">
</div>
</div>
...
<div class="scrollable">
<div class="scrollable__big-element"
#spacerElement> <!-- Place where You wanna add Spacer -->
</div>
</div>
interface Settings {
spacer: {
element: ElementRef; // default undefined
autoHeight: boolean; // default false
height: number; // default 0
type: SpacerTypes; // default undefined
};
sensitivity: {
top: number | string; // 50 = DefinedSensitivity.veryLow
bottom: number | string; // 10 = DefinedSensitivity.veryHigh
};
scroll: {
element: string; // default <body></body>
offset: {
top: number; // default 300
autoTop: boolean; // default false
};
};
}
enum DefinedSensitivity {
Locked = 10000,
veryLow = 50,
Low = 40,
Medium = 30,
High = 20,
veryHigh = 10
}
enum NavbarState {
SHOW = 'show',
HIDE = 'hide'
}
enum SpacerTypes {
MARGIN = 'margin-top',
PADDING = 'padding-top'
}
public initialSettings: Settings // default initial settings;
public settings: Settings // global settings used by all elements of component
// NgxStickyNavbarService.settings = global settings
// Method sets global settings but without triggering Subject<Settings>.
// Used only to change global settings variable.
setGlobalSettings(settings: Settings): void
// Method uses setGlobalSettings() and triggers Subject<Settings>
// to update global settings state in every
// component's element (service/directibe/component).
mergeSettingObject(settings: Settings): void
import { NgxStickyNavbarService } from 'ngx-sticky-navbar';
@Component(...)
export class SomeComponent {
settings: Settings = { ... }
constructor(private navbarService: NgxStickyNavbarService) { }
someMethod(settings: Settings) {
this.settings = {
...this.settings,
sensitivity: {
top: settings.sensitivity.top,
bottom: settings.sensitivity.bottom
// or use ...settings.sensitivity
}
};
this.navbarService.mergeSettingObject(this.settings);
}
}
or reasign initialSettings
- Fork repo.
npm install / yarn
.- Make your changes.
- Add your tests.
npm run test / yarn start test
.npm run build / yarn start build
.- After all tests are passing.
- Commit, push, PR.
Released under the terms of MIT License.