master

分支 (1)

管理

管理

master

native-practice
/
向下滚动隐藏头部向上显示.html

<html>
<style>
  html body {
    margin: 0;
    padding: 0;
    height: 2000px;
  }

  .tabBar {
    border: 1px solid black;
    top: 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
    if (beforeScrollTop > afterScrollTop) {
      tabBar.style.display = 'flex'
    } else {
      tabBar.style.display = 'none'
    }
    beforeScrollTop = afterScrollTop
  })
</script>

</html>