实现滚动时Header自动隐藏

这是掘金网页版的头部，当滚动条向下滑动时，主 header 会隐藏，次级 header 会吸在页面顶部。

样式#

首先，我们先通过两个 div 来模拟这两个 header

<template>
    <div class="main-header-wrapper">
      <div class="main-header"></div>
    </div>
  <div class="sub-header-wrapper">
    <div class="sub-header"></div>
  </div>
  <div v-for="i of 100" :key="i">测试滚动</div>
</template>

<style scoped>
  .main-header-wrapper {
    height: 50px;
  }
  
  .main-header {
    height: 50px;
    width: 100%;
    background: #ff0000;
    position: fixed;
    top: 0;
  }
  
  .sub-header-wrapper {
    height: 40px;
  }
  
  .sub-header {
    height: 40px;
    width: 100%;
    background: #00ff00;
    position: fixed;
    top: 50px;
  }
</style>

这里使用绝对定位来将两个 header 固定在页面顶部，这两个 div 分别是main-header和sub-header。他们两个分别用容器main-header-wrapper和sub-header-wrapper包裹，是为了防止由于 header 脱离文档流导致遮住正文元素。

简化#

不妨把滚动方向的检测放到一边，先实现这样的效果：为两个 header 加上类名hidden的时候，主 header 隐藏，次级 header 吸顶。这里可以直接用 transform 来实现。

为了方便演示效果，增加了一个按钮，用来添加和删除hidden类名。

    <script setup>
      import { ref } from 'vue';
      
      const isHidden = ref(false);
    </script>
    
    <template>
        <div class="main-header-wrapper">
          <div class="main-header" :class="{'hidden':isHidden}"></div>
        </div>
      <div class="sub-header-wrapper">
        <div class="sub-header" :class="{'hidden':isHidden}"></div>
      </div>
      <div v-for="i of 100" :key="i">测试滚动</div>
      <button style="position:fixed;bottom: 10px; right: 10px;" @click="isHidden = !isHidden">
        切换
      </button>
    </template>
    
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
    </style>
    
    <style scoped>
      .main-header-wrapper {
        height: 50px;
      }
      
      .main-header {
        height: 50px;
        width: 100%;
        background: #ff0000;
        position: fixed;
        top: 0;
      }
      
      .sub-header-wrapper {
        height: 40px;
      }
      
      .sub-header {
        height: 40px;
        width: 100%;
        background: #00ff00;
        position: fixed;
        top: 50px;
      }
      
      .main-header, .sub-header {
        transition: transform .15s ease-in-out;
        transform: translateY(0px);
      }
      
      .main-header.hidden, .sub-header.hidden {
        transform: translateY(-50px);
      }
    </style>

查看示例

使用选择器.main-header.hidden和.sub-header.hidden来选择具有 hidden 类名的 header 元素，将它们的 transform 属性设置为translateY(-50px)（即向上偏移 50px）。同时为元素设置 transition，提供缓动效果。

这样，header 的显示和隐藏就实现了，接下来就是检测滚动方向。

实现#

使用 vueUse 的useScroll和useDebounceFn简化了部分代码，

    <script setup>
      import { ref, watch } from 'vue';
      import { useScroll, useDebounceFn } from '@vueuse/core'
      
      const isHidden = ref(false);
      
      const { directions, isScrolling, arrivedState } = useScroll(document)
      
      const checkHeaderStatus = useDebounceFn(
        (top, bottom, topArrived) => {
          if (topArrived) {
            isHidden.value = false
            return
          }
          if (top) {
            isHidden.value = false
          } else if (bottom) {
            isHidden.value = true
          }
        },
        100
      )
      watch(directions, () => {
        if (isScrolling.value) {
          checkHeaderStatus(directions.top, directions.bottom, arrivedState.top)
        }
      })
    </script>

useScroll 能够输出响应式的滚动方向、滚动状态（到顶部 / 到底部）和是否在滚动

其中，函数返回的 directions 是一个 reactive 对象，我们对其进行监听，当该变量发生变化时，说明滚动方向发生了改变。

为了防止高频触发（例如反复上下滚动）导致 header 乱动，使用防抖函数限制了一下，其中checkHeaderStatus函数内的

    if (top) {
      isHidden.value = false
    } else if (bottom) {
      isHidden.value = true
    }

是关键，当向上滚动时，显示 header；向下滚动时，隐藏 header。

你可能会发现在这段代码的上面，还有一段不明所以的代码：

    if (topArrived) {
      isHidden.value = false
      return
    }

当滚动条到顶部时，直接显示 header，这是为了避免 iOS 设备中 safari 浏览器橡皮筋效果导致的误判

所以为什么 safari 橡皮筋效果也会触发 scroll 事件啊啊啊啊啊！！！甚至 y 值能到负值

查看示例

这里还有一个问题，只检测了滚动到顶部，而没有检测滚动到底部。这是因为我没想到什么很好的方法去检测。

前者，可以通过判断 y 值是否为 0（或小于 0）来实现；而后者，正常来说，滚动到底部时，文档高度 - 视窗高度应该和滚动条的 y 值是一致的。但是在 safari 里可能不一致，在 safari 中，当地址栏收缩时，上文的公式成立；但是当地址栏是展开状态时，两者会一个相差地址栏的高度。而地址栏是否展开我没找到判断的方法。

如果有知道如何判断是否滚动到底部的，希望能够和我分享分享