Angular Bootstrap Sticky Header

Angular Sticky Header - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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