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>

效果如下

最后

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

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

导航栏-滚动渐变 - 封装版
导航栏-滚动渐变 (已封装插件,任意调用) 样式采用mui框架的样式(无须在意) <!DOCTYPE html> <html><head><meta char ...
Android 10.0 导航栏增加虚拟按键点击控制下拉状态栏展开和收缩
目录 1.概述 2.导航栏增加虚拟按键点击控制下拉状态栏展开和收缩的核心代码
Vue导航栏吸顶及滚动渐变色
@阿乐今天敲代码没效果图好几天没更新了,做一个小demo吧.导航栏吸顶,以及随页面滚动实现渐变色吸顶前: 吸顶后: 滚动渐变色: 一.实现 html: <div class="n ...
写了个移动端可滑动（惯性滑动回弹）Vue导航栏组件 ly-tab
前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到n ...
Vue 顶部栏滚动控制显隐和文字字体闪光动画效果随笔
Vue top栏滚动显隐和文字字体颜色过渡动画效果随笔好长时间没用css动画效果了,今天恰好在封装某个组件时用上,随笔记下. <template><div class=" ...
android仿微信红包动画、Kotlin综合应用、Xposed模块、炫酷下拉视觉、UC浏览器滑动动画等源码...
Android精选源码仿微信打开红包旋转动画使用Kotlin编写的Android应用,内容你想象不到 Android手机上的免Root Android系统日志Viewer 一个能让微信 Mater ...
android仿微信红包动画、Kotlin综合应用、Xposed模块、炫酷下拉视觉、UC浏览器滑动动画等源码
Android精选源码仿微信打开红包旋转动画使用Kotlin编写的Android应用,内容你想象不到 Android手机上的免Root Android系统日志Viewer 一个能让微信 Mater ...
由一次线上故障来理解下 TCP 三握、四挥 Java 堆栈分析到源码的探秘
本文导读: 生产故障场景介绍 TCP 建连三次握手过程 TCP 断连四次挥手过程结合 Java 堆栈剖析源码再从堆栈中找到"罪魁祸首" 问题优化方案总结 1.生产故障场景介绍 ...
GitHub上最火的22个Android开源项目源码(最少的一个也超过10k star)
GitHub上最火的22个Android开源项目源码均超万星 chat图表最全android工具类库 29.6k start Android智能下拉刷新框架-SmartRefreshLayout 2 ...

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

目录

案例1

源码如下

效果如下

案例2

源码如下

效果如下

最后

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

最新文章

热门文章