Vue中吸顶导航的实现

目录

1 前言

2 具体步骤 

2.1 安装VueUse

2.2 吸顶导航组件中导入useScroll

2.3 在style中定义吸顶导航的两种状态

2.4 template中设置吸顶导航出现的时机

---

1 前言

本处使用VueUse更便捷的实现吸顶导航，具体内容及更多操作请看官网文档，如下：

useScroll | VueUse

2 具体步骤 

2.1 安装VueUse

在项目路径下的命令提示符窗口，输入如下指令：

npm i @vueuse/core

2.2 吸顶导航组件中导入useScroll

通过如下代码即可导入useScroll并获取纵坐标的值：

<script setup>
import { useScroll } from '@vueuse/core'    //导入useScroll
const {y} = useScroll(window)    //获取纵坐标的值
//其它代码
</script>

<template>
<!-- 其它代码 -->
</template>

<style scoped lang='scss'>
//其它代码
</style>

2.3 在style中定义吸顶导航的两种状态

<script setup>
import { useScroll } from '@vueuse/core'    //导入useScroll
const {y} = useScroll(window)    //获取纵坐标的值
//其它代码
</script>

<template>
    <div class="app-header-sticky">
        <!-- 其它代码 -->
    </div>
</template>

<style scoped lang='scss'>
.app-header-sticky {
  //其它代码

  // 吸顶导航状态
  // 状态一：往上平移自身高度 + 完全透明
  transform: translateY(-100%);
  opacity: 0;
  // 状态二：移除平移 + 完全不透明
  //&.show表示在父元素上添加show类时，以下样式将被应用
  &.show {
    transition: all 0.3s linear;    //元素会以0.3秒的时间以线性的速度过渡到不透明度为1的状态，
    transform: none;
    opacity: 1;
  }
}
</style>

2.4 template中设置吸顶导航出现的时机

这里就是当我们页面下划78的时候，原来的顶栏就看不到了，这时候我们的吸顶导航就该出现了。

<script setup>
import { useScroll } from '@vueuse/core'    //导入useScroll
const {y} = useScroll(window)    //获取纵坐标的值
//其它代码
</script>

<template>
    <!-- 吸顶导航部分 -->
    <div class="app-header-sticky" :class="{show: y > 78}">
        <!-- 其它代码 -->
    </div>
</template>

<style scoped lang='scss'>
.app-header-sticky {
  //其它代码

  // 吸顶导航状态
  // 状态一：往上平移自身高度 + 完全透明
  transform: translateY(-100%);
  opacity: 0;
  // 状态二：移除平移 + 完全不透明
  //&.show表示在父元素上添加show类时，以下样式将被应用
  &.show {
    transition: all 0.3s linear;    //元素会以0.3秒的时间以线性的速度过渡到不透明度为1的状态，
    transform: none;
    opacity: 1;
  }
}
</style>