### Hide on Scroll Bottom

#### Description

The hide on scroll option use to hide your fixed top or bottom navbar on page scroll down, once you scroll up again it will be visible. In this page you can experience it.

Experience it!

Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.

#### CSS Classes

This table contains all classes related to the fixed top or bottom navbar with hide on scroll.

All these options can be set via following classes:

Classes | Description
--- | ---
`.navbar-hide-on-scroll` | To set navbar hide on scroll you need to add `.navbar-hide-on-scroll` class in navbar `<nav>` tag. Refer HTML markup line no 7.
`.fixed-top` | To hide on scroll you need to set navbar fixed also, add fixed navbar in top `.fixed-top` class in navbar `<nav>` tag. Refer HTML markup line no 7.
`.fixed-bottom` | To hide on scroll you need to set navbar fixed also, add fixed navbar in bottom `.fixed-bottom` class in navbar `<nav>` tag. Refer HTML markup line no 7.

#### HTML Markup

This section contains HTML Markup to set navbar hide on scroll. This markup define where to add css classes to make navbar hide on scroll.

- Line no 7: Contain the `.navbar-hide-on-scroll` class to make navbar hide on scroll.
- Line no 7: Contain the `.fixed-top` or `.fixed-bottom` class for adjusting navbar fixed on top.

Modern has a ready to use starter kit, you can use this layout directly by using the starter kit pages from the `modern-admin/starter-kit` folder.

                <!DOCTYPE html>
                  <html lang="en">
                    <head></head>
                    <body data-menu="vertical-menu" class="vertical-layout vertical-menu 2-column menu-expanded">

                      <!-- navbar-hide-on-scroll-->
                      <nav role="navigation" class="header-navbar navbar-expand-sm navbar navbar-with-menu navbar-hide-on-scroll fixed-bottom navbar-dark navbar-shadow navbar-border">
                          ...
                      </nav>

                      <!-- BEGIN Navigation-->
                      <div class="main-menu menu-dark menu-shadow">
                          ...
                      </div>
                      <!-- END Navigation-->

                      <!-- BEGIN Content-->
                      <div class="content app-content">
                          <div class="content-wrapper">
                              <!-- content header-->
                              <div class="content-header row">
                                  ...
                              </div>
                              <!-- content header-->

                              <!-- content right-->
                              <div class="content-right">
                                  ...
                              </div>
                              <!-- content right-->

                          </div>
                      </div>
                      <!-- END Content-->

                      <!-- START FOOTER DARK-->
                      <footer class="footer footer-dark">
                          ...
                      </footer>
                      <!-- START FOOTER DARK-->

                    </body>
                  </html>

#### JS Configuration

Modern Admin use headroom.js to functionate navbar hide on scroll. You need to use the following headroom.js configurations code for customization. File app.js has the following code for customization.

##### Plugin overview

Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.

##### Plugin options

Headroom.js can also accept an options object to alter the way it behaves. You can see the default options by inspecting Headroom.options. The structure of an options object is as follows:

                      {
                      // vertical offset in px before element is first unpinned
                      offset : 0,
                      // scroll tolerance in px before state changes
                      tolerance : 0,
                      // or you can specify tolerance individually for up/down scroll
                      tolerance : {
                          up : 5,
                          down : 0
                      },
                      // css classes to apply
                      classes : {
                          // when element is initialised
                          initial : "headroom",
                          // when scrolling up
                          pinned : "headroom--pinned",
                          // when scrolling down
                          unpinned : "headroom--unpinned",
                          // when above offset
                          top : "headroom--top",
                          // when below offset
                          notTop : "headroom--not-top",
                          // when at bottom of scroll area
                          bottom : "headroom--bottom",
                          // when not at bottom of scroll area
                          notBottom : "headroom--not-bottom"
                      },
                      // element to listen to scroll events on, defaults to `window`
                      scroller : someElement,
                      // callback when pinned, `this` is headroom object
                      onPin : function() {},
                      // callback when unpinned, `this` is headroom object
                      onUnpin : function() {},
                      // callback when above offset, `this` is headroom object
                      onTop : function() {},
                      // callback when below offset, `this` is headroom object
                      onNotTop : function() {},
                      // callback when at bottom of page, `this` is headroom object
                      onBottom : function() {},
                      // callback when moving away from bottom of page, `this` is headroom object
                      onNotBottom : function() {}
                  }

Options | Datatype | Description
--- | --- | ---
`offset` | Number | Vertical offset in px before element is first unpinned.
`tolerance` | Number | Scroll tolerance in px before state changes,or you can specify tolerance individually for up/down scroll.
`initial` | String | When element is initialised this class will be applied.
`pinned` | String | when scrolling up, this class will be applied.
`unpinned` | String | When scrolling down, this class will be applied.
`Top` | String | When above offset, this class will be applied.
`notTop` | String | When below offset, this class will be applied.
`bottom` | String | When at bottom of scroll area, this class will be applied.
`notBottom` | String | When not at bottom of scroll area, this class will be applied.
`scroller` |  | Element to listen to scroll events on, defaults to `window`.
`onPin` | function | Callback when pinned, `this` is headroom object.
`onUnpin` | function | Callback when unpinned, `this` is headroom object.
`onTop` | function | Callback when above offset, `this` is headroom object.
`onNotTop` | function | Callback when below offset, `this` is headroom object.
`onBottom` | function | Callback when at bottom of page, `this` is headroom object.
`onNotBottom` | function | Callback when moving away from bottom of page, `this` is headroom object.

In Modern Admin we have just used following headroom.js configurations options in `js/code/app.js`

Top navbar position example:

                  // Top Navbars - Hide on Scroll
                  $(".navbar-hide-on-scroll.fixed-top").headroom({
                    "offset": 205,
                    "tolerance": 5,
                    "classes": {
                       // when element is initialised
                      initial : "headroom",
                      // when scrolling up
                      pinned : "headroom--pinned-top",
                      // when scrolling down
                      unpinned : "headroom--unpinned-top",
                    }
                  });

Bottom navbar position example:

                  // Bottom Navbars - Hide on Scroll
                  $(".navbar-hide-on-scroll.fixed-bottom").headroom({
                    "offset": 205,
                    "tolerance": 5,
                    "classes": {
                       // when element is initialised
                      initial : "headroom",
                      // when scrolling up
                      pinned : "headroom--pinned-bottom",
                      // when scrolling down
                      unpinned : "headroom--unpinned-bottom",
                    }
                  });

#### Theme Customizer

Customize & Preview in Real Time

##### Menu Color Options

##### Layout Options

Collapsed Menu
Fixed Layout
Boxed Layout
Static Layout
Native Scroll
Right Side Icons
Bordered Navigation
Flipped Navigation
Collapsible Navigation
Static Navigation
Brand Center
Static Top

##### Navigation Color Options

###### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

###### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink

### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink
Buy Now