Angular Bootstrap Sticky Header

Angular Sticky Header - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

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>

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:
Edit in sandbox 
        
            
          import { StickyHeaderModule, NavbarModule } from 'ng-uikit-pro-standard'  
        
        
    
        
            
          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)"