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

案例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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

效果如下

案例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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

效果如下

最后

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