vue导航栏滚动下拉条上拉隐藏，下拉显示样式变化(源码)

自己创建页面查看效果呦~

<template>
  <div class="bontent">
    <div id="box" :class="navShow ? 'navOn' : 'navOff'">navBar内容</div>
  </div>
</template>
	
<script>
export default {
      
      
  // 获取top值
  data() {
      
      
    return {
      
      
      top: "",
      navShow: null,
    };
  },

  // 获取浏览器滚轮
  mounted() {
      
      
    window.addEventListener("scroll", () => {
      
      
      this.top =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;
    });
  },

  // 监听top值的变化
  watch: {
      
      
    top(newValue, oldValue) {
      
      
      // 等新值大于100的时候再做变化（优化一下）
      //   if (newValue > 100) {
      
      
      if (newValue > 1) {
      
      
        if (newValue > oldValue) {
      
      
          this.navShow = false;
          console.log("向下滚动"); //显示
        } else {
      
      
          this.navShow = true;
          console.log("向上滚动"); //隐藏
        }
      }
    },
  },
};
</script>

<style>
#box {
      
      
}
.navOn {
      
      
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 0.2s ease-in-out 0.2s;
  transform: translateZ(0);
  width: 100%;
  height: 100px;
  border: 1px solid red;
  background: #fff;
  opacity: 1;
}
.navOff {
      
      
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 0.2s ease-in-out 0.2s;
  transform: translate3d(0, -100%, 0);
  width: 100%;
  height: 100px;
  border: 1px solid red;
  background: #fff;
  opacity: 0;
}

.bontent {
      
      
  width: 100%;
  height: 5000px;
  background: pink;
}
</style>

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！