Vue、JS判断滚动方向【Nav导航条根据滚动条方向显示淡入淡出效果。】

核心内容就几行，ctrl+f 搜索 mounted 第三个就是。

在纯js跑请复制 mounted 块中的代码，并去掉this.show=flase/true;

在vue下跑，没用less的话请去掉lang="less"
然后自行找个在线less编译一下style块中的内容。

这个代码主要实现了：Nav导航条根据滚动条方向显示淡入淡出效果。
Nav的定位是fixed，向下滚动导航条隐藏，向上滚动导航条出现。

<template>
  <div id="demo">
    <!-- 淡入淡出动画 -->
    <transition name="fade">
      <!-- 导航条 -->
      <div class="nav"
           v-show="show">
        <!-- 弄点数据 -->
        <a href=""
           v-for="(item,index) of items"
           :key="index"
           :class="{active:item.active}">{{item.title}}</a>
      </div>
    </transition>
    <!-- 状态信息：是否显示 -->
    <div class="status">
      {{this.show}}
    </div>
    <!-- 滚动条靠br标签支撑出来 -->
    <br v-for="(x,index) of 100" :key='index'>
    </div>
</template>

<script>
// import "./myjs.js";
export default {
  mounted() {
 	//核心开始------------------------------------
    let oldTop = 0; //旧数据，初始为0
    // 将自定义方法绑定到窗口滚动条事件
    window.onscroll = () => {
      let top = document.scrollingElement.scrollTop; //触发滚动条，记录数值
      //旧数据大于当前位置，表示滚动条top向上滚动
      if (oldTop > top) {
        this.show = true;
        console.log("↑");
      } else {
        //相反...
        this.show = false;
        console.log("↓");
      }
      oldTop = top;//更新旧的位置
    };
    //核心结束------------------------------------
    //
    //当前位置60
    //
    //旧>新=↑
    //
    //旧的位置90
    //
  },
  data: function() {
    return {
      show: true,
      items: [
        {
          active: false,
          title: "首页"
        },
        {
          active: true,
          title: "说说"
        },
        {
          active: false,
          title: "归档"
        },
        {
          active: false,
          title: "文章"
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.nav {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 14px;
  position: fixed;
}
a {
  color: #fff;
  text-decoration: none;
  padding: 2px 5px;
}
.active {
  position: relative;
  &::after {
    @size: 3px;
    content: "";
    position: absolute;
    display: inline-block;
    bottom: -5px;
    left: 50%;
    width: @size;
    height: @size;
    background: rgb(255, 255, 81);
    border-radius: 100%;
  }
}
.status {
  position: fixed;
  left: 100px;
  top: 100px;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  height: 0;
}
</style>