web
mobile
Edit these docs Rate these docs

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 example

Just 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>
Edit these docs Rate these docs

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'
Import example Modules list

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)"