首页 » Framework7 » Framework7 导航栏
网站地图

滚动时自动隐藏导航栏和工具栏

当想下滚动页面的时候，Framework7可以让导航栏和工具栏自动隐藏。

如果你想全局启用这个功能，你只需要在 应用初始化 时候设置这几个参数：hideNavbarOnPageScroll, hideToolbarOnPageScroll, hideTabbarOnPageScroll 和 showBarsOnPageScrollEnd:

如果你只想在某些特定页面打开自动隐藏的功能，你可以通过添加额外的 <div class="page-content"> 类来实现：

  • hide-bars-on-scroll - 页面滚动时自动隐藏工具栏和导航栏

  • hide-navbar-on-scroll - 页面滚动时自动隐藏导航栏

  • hide-toolbar-on-scroll - 页面滚动时，自动隐藏工具栏

  • hide-tabbar-on-scroll - 页面滚动时，自动隐藏带图标的工具栏（tabbar)

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)

示例

...
<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