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>

效果如下

案例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>

效果如下

最后

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