戴兜的小屋
戴兜的小屋

实现滚动时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-headersub-header。他们两个分别用容器main-header-wrappersub-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的useScrolluseDebounceFn简化了部分代码,

<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中,当地址栏收缩时,上文的公式成立;但是当地址栏是展开状态时,两者会一个相差地址栏的高度。而地址栏是否展开我没找到判断的方法。

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

赞赏

戴兜

文章作者

发表回复

textsms
account_circle
email

戴兜的小屋

实现滚动时Header自动隐藏
这是掘金网页版的头部,当滚动条向下滑动时,主header会隐藏,次级header会吸在页面顶部。 样式 首先,我们先通过两个 div 来模拟这两个header <template> <div …
扫描二维码继续阅读
2023-02-02