Hide Bars (Navbar and Toolbar) On Scroll

Framework7 allows you to enable this feature when Navbar and/or Toolbar can be automatically hidden while you scrolling page down.

To enable it globally for all pages you may use hideNavbarOnPageScroll, hideToolbarOnPageScroll, hideTabbarOnPageScroll and showBarsOnPageScrollEnd App initialization parameters

If you want to enable it on some specific page by using additional classes on <div class="page-content">:

  • hide-bars-on-scroll - to hide both Navbar and Toolbar on page scroll

  • hide-navbar-on-scroll - to hide Navbar on page scroll

  • hide-toolbar-on-scroll - to hide Toolbar on page scroll

  • hide-tabbar-on-scroll - to hide Tab bar on page scroll (only for Tab Bar app layout)

To disable this behavior on specific pages you may use the following additional classes:

  • keep-bars-on-scroll - to keep Navbar and Toolbar on page scroll

  • keep-navbar-on-scroll - to keep Navbar on page scroll

  • keep-toolbar-on-scroll - to keep Toolbar on page scroll

  • keep-tabbar-on-scroll - to keep Tab bar on page scroll (only for Tab Bar app layout)

Demo

...
<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"></div>
      <div class="center">Hide Bars On Scroll</div>
      <div class="right"></div>
    </div>
  </div>
  <!-- "hide-bars-on-scroll" class to hide both Navbar and Toolbar -->
  <div class="page-content hide-bars-on-scroll">
    <div class="content-block">
      <p>Scroll page down</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. Sed posuere a orci id imperdiet.</p>
      ...
    </div>
  </div>
  <div class="toolbar">
    <div class="toolbar-inner">
      <a href="#" class="link">Hello</a>
      <a href="#" class="link">World</a>
    </div>
  </div>
</div>
...

If you don't want your Navbar/Toolbar become visible when scroll reaches end of the page, then you need to disable showBarsOnPageScrollEnd parameter on App initialization

If you don't want your Navbar/Toolbar become visible when you scroll to top, then you need to disable showBarsOnPageScrollTop parameter on App initialization. In this case they will become visible only on the most top scroll position, in the beginning of the page