向上滚动tabBar隐藏向下显示

原理:
监听滚动事件并获取页面当前的滚动高度，比较滚动前后的高度，判断是向上滚动还是向下滚动。并对tabBar样式进行更改。

<html>
<style>html body {margin: 0;padding: 0;height: 1000px;}.tabBar {border: 1px solid black;bottom: 0px;left: 0px;display: flex;justify-content: center;align-items: center;font-size: 24px PingFang-regular;position: fixed;height: 100px;width: 100%;}</style><body><div class="tabBar">这是一个导航栏</div></body><script>let beforeScrollTop =document.documentElement.scrollTop || document.body.scrollTopconst tabBar = document.querySelector('.tabBar')window.addEventListener('scroll', () => {const afterScrollTop =document.documentElement.scrollTop || document.body.scrollTopconsole.log('监听到了滚动', beforeScrollTop, afterScrollTop)if (beforeScrollTop > afterScrollTop) {tabBar.style.display = 'none'} else {tabBar.style.display = 'flex'}beforeScrollTop = afterScrollTop})</script>
</html>

效果：如果再添加一些渐变的动画就更好了

向上滚动tabBar隐藏向下显示相关推荐

vue导航栏滚动下拉条上拉隐藏，下拉显示切换样式变化(源码)
目录案例1 源码如下效果如下案例2 源码如下效果如下最后案例1 源码如下 navBar内容,上拉显示navBar,下拉隐藏navBar,固定在顶部,样式切换 <template> ...
android 上滑隐藏view,Android CoordinatorLayout + AppBarLayout(向上滚动隐藏指定的View)
在新的Android Support Library里面,新增了CoordinatorLayout, AppBarLayout等. 实现的效果: 向下滚动RecylerView,Tab会被隐藏,向上滚 ...
ajax实现向上正在加载,向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
vue 电梯导航制作（鼠标滚动控制导航栏的显示与隐藏）
鼠标滚动控制导航栏的显示与隐藏上图先看效果: 下面为2张图,默认为导航栏,当鼠标向下滚动一定距离时,变为箭头, 并且点击黄色的返回图标,也变为下方箭头,此时再滚动窗口,不会变为导航栏. 点击下方箭头 ...
C语言屏幕字体滚动显示,想实现显示屏上文字向上滚动的操作，哪位大大能帮忙啊...
我在编写stm32实现can总线通信的程序,在循环模式下,传输的数据比较多,屏幕无法全部显示,于是就想在每次显示数据之前加入一个可以将之前的数据向上推移的程序.哪位大大能给出程序么?或者给点其他的建议 ...
php向下滑动,js如何判断鼠标滚轮是向下还是向上滚动
判断鼠标滚轮是向上或向下滚动,不同的浏览器的判别方式是不一样的,当前比较流行的浏览器有 IE,Opera,Safari,Firefox,Chrome,在这个问题上Firefox和其他浏览器的实现方式是 ...
向上滚动终端_终端 - 如何在Linux控制台上向上/向下滚动？
终端 - 如何在Linux控制台上向上/向下滚动? 我认识到Up / Down会给你命令历史. 但是,你如何通过上下滚动查看过去的输出? 我使用了Shift + Page Up / Page Down ...
c语言管道文件隐藏dos,实用dos下显示隐藏文件的命令
你如果想查看所有文件夹,可运行dir /a,这个/a参数表示显示隐藏文件. attrib 文件夹或者文件完全路径 –s –r –h -a(如:attrib c:\boot –s –r –h -a) 添 ...
通过uc.js实现pc firefox页面向下滚动自动隐藏导航栏，复刻firefox移动版的丝滑体验
页面向下滚动自动隐藏firefox导航栏简述 firefox移动版有个滑动页面浏览时自动隐藏导航栏的功能,这个功能很机智,能够最大化的同时让你尽量无感.然后想在pc实现这个功能,搜了一下发现uc.j ...

向上滚动tabBar隐藏向下显示

向上滚动tabBar隐藏向下显示相关推荐

最新文章

热门文章