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

本文链接：https://blog.youkuaiyun.com/m0_49714202/article/details/125440543

本文介绍了如何使用Vue.js监听页面滚动事件，动态切换导航栏的显示状态。案例1展示了当页面向下滚动时隐藏navBar，上拉时显示；案例2则相反，下拉时显示navBar，上拉时隐藏。代码中通过监听`top`值变化，结合CSS实现了平滑过渡的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例1

源码如下

navBar内容,上拉显示navBar,下拉隐藏navBar,固定在顶部,样式切换

<template>
  <div class="bontent">
    <div id="box" :class="navShow ? 'navOn' : 'navOff'">navBar内容,上拉显示navBar,下拉隐藏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>

效果如下

在这里插入图片描述

案例2

源码如下

navBar内容,上拉隐藏navBar,下拉显示navBar,固定在顶部,样式切换

<template>
  <div class="bontent">
    <div id="box" :class="navShow ? 'navOn' : 'navOff'">navBar内容,上拉隐藏navBar,下拉显示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 = true;
          console.log("向下滚动"); //显示   
        } else {
          this.navShow = false;
          console.log("向上滚动"); //隐藏
        }
      }
    },
  },
};
</script>

<style>
#box {
}
.navOn {
  position: fixed;
  top: 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;
  top: 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>