自动隐藏导航


4029 | 1581  | 292 | 添加收藏 上一个 下一个
资源描述 : 一个简单的导航,当用户向下滚动网页时自动隐藏,向上滚动网页时显示。
自动隐藏导航
资源详情

自动隐藏导航已存在相当长的一段时间了,尤其是在移动设备上。这种用户体验模式背后的理念是简单有效,这让我们更容易操作。所以我们把它贴在上面。当用户向下滚动页面,腾出更多的空间内容。如果用户向上滚动页面,我们理解他的将要访问的导航,所以我们把它带回来。


创建结构


TheHTML 体系组成的 aheader.cd-auto-hide-headerelemen 用来包装的主导航 (nav.cd-primary-nav) 和amain.cd-main-content页面主要内容。


<headerclass="cd-auto-hide-header">
  <divclass="logo">
    <ahref="#0">
      <imgsrc="img/cd-logo.svg" alt="Logo"></a>
        </div>
        <navclass="cd-primary-nav">
          <ahref="#cd-navigation" class="nav-trigger">
            <span>
              <emaria-hidden="true"></em>Menu</span>
            </a>
            <!-- .nav-trigger -->
            <ulid="cd-navigation">
              <li>
                <ahref="#0">The team</a></li>
              <li>
                <ahref="#0">Our Services</a></li>
              <li>
                <ahref="#0">Our Projects</a></li>
              <li>
                <ahref="#0">Contact Us</a></li>
              </ul>
              </nav>
              <!-- .cd-primary-nav --></header>
              <!-- .cd-auto-hide-header -->
              <mainclass="cd-main-content">
                <!-- content here --></main>
                <!-- .cd-main-content -->

如果页面有一个导航栏,插入标题元素的additionalnav.cd-secondary-navis


<headerclass="cd-auto-hide-header">
  <divclass="logo">
    <ahref="#0">
      <imgsrc="img/cd-logo.svg" alt="Logo"></a>
        </div>
        <navclass="cd-primary-nav">
          <ahref="#cd-navigation" class="nav-trigger">
            <span>
              <emaria-hidden="true"></em>Menu</span>
            </a>
            <!-- .nav-trigger -->
            <ulid="cd-navigation">
              <!-- links here --></ul>
              </nav>
              <!-- .cd-primary-nav -->
              <navclass="cd-secondary-nav">
                <ul>
                  <li>
                    <ahref="#0">Intro</a></li>
                  <!-- additional links here --></ul>
                </nav>
                <!-- .cd-secondary-nav --></header>
                <!-- .cd-auto-hide-header -->
                <mainclass="cd-main-content sub-nav">
                  <!-- content here --></main>
                  <!-- .cd-main-content -->

最后,如果二级导航低于hero block,a.cd-heroelement 插入下方

,其次是 the.cd-secondary-navelement:


<headerclass="cd-auto-hide-header">
  <divclass="logo">
    <ahref="#0">
      <imgsrc="img/cd-logo.svg" alt="Logo"></a>
        </div>
        <navclass="cd-primary-nav">
          <ahref="#cd-navigation" class="nav-trigger">
            <span>
              <emaria-hidden="true"></em>Menu</span>
            </a>
            <!-- .nav-trigger -->
            <ulid="cd-navigation">
              <!-- links here --></ul>
              </nav>
              <!-- .cd-primary-nav --></header>
              <!-- .cd-auto-hide-header -->
              <sectionclass="cd-hero">
                <!-- content here --></section>
                <!-- .cd-hero -->
                <navclass="cd-secondary-nav">
                  <ul>
                    <!-- links here --></ul>
                  </nav>
                  <!-- .cd-secondary-nav -->
                  <mainclass="cd-main-content sub-nav-hero">
                    <!-- content here --></main>
                    <!-- .cd-main-content -->

添加样式


我们用the.cd-auto-hide-headerclass 来定义自动隐藏页眉的主要样式。默认情况下,标头有一个固定的位置和一个顶部为零;当用户开始向下滚动,the.is-hiddenclass用来隐藏标题右边上面视区。


.cd - auto - hide - header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100 % ;
    height: 60px;
    transition: transform.5s;
}.cd - auto - hide - header.is - hidden {
    transform: translateY( - 100 % );
}
.cd - secondary - nav.fixed {
    position: fixed;
    top: 60px;
}.cd - secondary - nav.slide - up {
    transform: translateY( - 60px);
}

最后,“主要内容”和“简介块”定义基本样式.cd-main-contentand.cd-hero(主要是填充/固定头)的基本样式。


事件处理


我们使用jQuery来监听窗口对象的滚动事件


varscrolling = false;
$(window).on('scroll',
function() {
    if (!scrolling) {
        scrolling = true; (!window.requestAnimationFrame) ? setTimeout(autoHideHeader, 250) : requestAnimationFrame(autoHideHeader);
    }
});

autoHideHeader() 函数功能隐藏/显示导航根据用户是否向上或向下滚动。



指尖代码 资源每日更新 www.zjdaima.com