Angular Bootstrap Sticky Header
Angular Sticky Header - Bootstrap 4 & Material Design
Sticky Header was created to allow you to use the functionality that is implemented in Google Chrome on mobile. If you move the page down, navbar will hide, and if you move up, navbar will show up.
See the following sticky header example:
Basic example
Live exampleJust add the mdbStickyHeader directive to the mdb-navbar element to make it sticky.
If you have a .fixed-top class in your navbar, remove it.
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo" mdbStickyHeader>
<mdb-navbar-brand><a class="navbar-brand" href="#">Navbar</a></mdb-navbar-brand>
</mdb-navbar>
<div style="height: 300vh"> </div>
Angular Sticky Header - API
In this section you will find informations about required modules and available inputs, outputs, methods and events of sticky header directive.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Reference for MDB Angular Navigation:
// For MDB Angular Pro
import { StickyHeaderModule, NavbarModule } from 'ng-uikit-pro-standard'// For MDB Angular Free
import { StickyHeaderModule, NavbarModule } from 'angular-bootstrap-md'Directives
StickyHeader
Selector: mdbStickyHeader
Export as: mdbStickyHeader
Type: StickyHeaderDirective
Inputs
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
animationDuration |
number | 200 | Allow to change the default transition duration (in ms). | animationDuration="600" |
Outputs
| Name | Type | Description | Example |
|---|---|---|---|
transitionEnd |
EventEmitter<{state: string}> | Event fired header transition ends. | (transitionEnd)="onTransitionEnd($event)" |