向上滚动tabBar隐藏向下显示
程序员文章站
2022-06-01 22:17:17
...
原理:
监听滚动事件并获取页面当前的滚动高度，比较滚动前后的高度，判断是向上滚动还是向下滚动。并对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.scrollTop
const tabBar = document.querySelector('.tabBar')
window.addEventListener('scroll', () => {
const afterScrollTop =
document.documentElement.scrollTop || document.body.scrollTop
console.log('监听到了滚动', beforeScrollTop, afterScrollTop)
if (beforeScrollTop > afterScrollTop) {
tabBar.style.display = 'none'
} else {
tabBar.style.display = 'flex'
}
beforeScrollTop = afterScrollTop
})
</script>
</html>
效果：如果再添加一些渐变的动画就更好了