Hide on Scroll Bottom

  1. Home
  2. Navbars
  3. Hide on Scroll Bottom
Bootstrap CardsButtons Extended

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.

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-topclass 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-bottomclass 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-topor .fixed-bottom class for adjusting navbar fixed on top.

Stack has a ready to use starter kit, you can use this layout directly by using the starter kit pages from the stack-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

Stack 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 Stack 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",                }              });

JADE Configuration

Stack Admin use JADE as template engine to generate pages and whole template quickly using node js, for getting start with JADE usage & template generating process please refer template documentation.

JADE Variables

This table contains required JADE variables to generate fixed navbar layout.

Block Variable Datatype Value Description
pageConfig navbarFixed boolean false pageConfigblock has a navbarFixed variable, it contains navbar specific settings in that you need to set falseto adjust top padding..
navbarConfig navbarPosition string 'fixed-bottom' navbarConfigblock has a navbarPosition variable, it contains navbar specific classes in that you need to set 'fixed-bottom'.
navbarConfig navbarHideOnScroll string boolean navbarConfigblock has a navbarHideOnScroll variable, it contains navbar hide on scroll specific settings in that you need to set trueto enable it.
verticalMenuConfig menuType string 'menu-static' verticalMenuConfigblock has a menuType variable, it contains navigation specific classes in that you need to set 'menu-static'for vertical layout. Hide on scroll support only static navigation.
horizontalMenuConfig menuType string 'menu-static' horizontalMenuConfigblock has a menuType variable, it contains navigation specific classes in that you need to set 'menu-static'for horizontal layout. Hide on scroll support only static navigation.
JADE Code

To set navbar hide on scroll on page or template, you need to use following JADE code.

  • Line no 20-21:Set navbar fixed setting to navbarFixed variable value as falsein pageConfig block.
  • Line no 23-25:Set navbar fixed class to navbarPosition variable value as 'fixed-bottom'in navbarConfig block.
  • Line no 25:Set navbar hide on scroll setting to navbarHideOnScroll variable value as truein navbarConfig block.
  • Line no 27-28:Set navigation static class to menuType variable value as 'menu-static'in verticalMenuConfig block.
  • Line no 30-31:Set navigation static class to menuType variable value as 'navbar-static'in horizontalMenuConfig block.
  • Line no 37-38:contentblock has content section html file included include ../contents/navbar-hide-on-scroll-bottom.html, which can be customizable on page level.

If you want to use this layout on page level you need to define it on page it self. This template has one example jade file for fixed navbar-hide-on-scroll-bottom.jade, however you can use it on template level but it will generate whole template has a navbar hide on scroll class. 

            block pageVars              - var pageTitle    = "Hide on Scroll Bottom"              - var pageSubTitle = "Bottom navbar hide on page scroll"              - var description  = "The hide on scroll option use to hide your fixed bottom navbar on page scroll."              - var activeMenu   = "navbar-hide-on-scroll-bottom"            extends template            append pageConfig              - var navbarFixed = false            append navbarConfig              - var navbarPosition = "fixed-bottom"              - var navbarHideOnScroll = true            append verticalMenuConfig              - var menuType = "menu-static"            append footerConfig              - var footerType = "footer-static"            append breadcrumbs              +breadcrumbs([{url:"index.html",name:"Home"},{url:"#",name:"Navbars"}, {name:"Hide on Scroll Bottom"}])            //- Include page content in page block            append content              include ../contents/navbar-hide-on-scroll-bottom.html            //- Vendor CSS            //------------------------------            //- Add Vendor specific CSS            append vendorcss            //- Page CSS            //------------------------------            //- Add custom page specific CSS            append pagecss            //- Vendor JS            //------------------------------            //- Add vendor specific JS            append vendorjs            //- Page JS            //------------------------------            //- Add custom page specific JS            append pagejs