根据滚动条方向显示或隐藏导航头部

简介

你可能见过掘金首页，喜马拉雅官网，知乎官网，当我们滚动条向下滑动的时候，导航头部会被隐藏，当向上滑动的时候，导航头部又会出现，这个功能还是很常见的，接下来，介绍结合vue实现这个功能，只需简单几步。

图例

html结构

    <div :class="{isHide:isHide}" class="home-fixed">
      <home-head-login></home-head-login>//这里是导航头部内容，根据需求自定义
    </div>
    <!-- E 头部导航 -->

css代码

.home-fixed {
    width: 100%;
    height: 104px;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    box-shadow: 0px 3px 7px 0px rgba(70, 70, 70, 0.35);
    background: #fff;
    transition: all 0.3s;//添加过渡，优化体验，具体可以根据需求扩展
  }
  .home-fixed.isHide {//这个类名用来动态改变显示藏（关键）
    top: -104px;
  }

js代码（vue版本）

data() {
    return {
      oldScrollTop: 0,
      isHide: false,
    }
  },
    mounted() {
    // 监听页面滚动事件
    window.addEventListener("scroll", this.scrolling)
  },
  methods: {
    // 头部导航做鼠标滚动优化
    scrolling() {
      // 滚动条距文档顶部的距离（做兼容处理）===》不懂的可以结合画图理清逻辑
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
        document.body.scrollTop
      // 滚动条滚动的距离
      let scrollStep = scrollTop - this.oldScrollTop;
      // 更新——滚动前，滚动条距文档顶部的距离
      this.oldScrollTop = scrollTop;
      if (scrollStep < 0) {（关键）
        this.isHide = false;
      } else {
        this.isHide = true;
      }
    }
  }

效果

效果图地址

我就拿个公司项目给大家参考了：etextbook.hep.com.cn/#/home/main…