向上滚动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.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>

效果:如果再添加一些渐变的动画就更好了
向上滚动tabBar隐藏向下显示_第1张图片

你可能感兴趣的:(向上滚动tabBar隐藏向下显示)