使用组合式API实现吸顶效果(VueUse)

目标效果

• 目标: 头部导航吸顶
• 效果图
  

思路

• 首先准备一个类名, 使用动态class控制样式让其显示或隐藏, 监听其滚动页面, 判断滚动距离
• 显示条件: 当屏幕滚动距离大于78px的时候让其显示,小于78px则隐藏

代码实现:

1. 安装@vueuse/core 包，它封装了常见的一些交互逻辑
   https://vueuse.org/core/useWindowScroll/

npm install @vueuse/core

2. 使用, 基于vue3x

<template>
<div class="app-header-sticky" :class="{show: showNav}">
</template>
  
<script>
import { useWindowScroll } from '@vueuse/core'
import { ref, watch } from 'vue'
export default {
 setup() {
	const show = ref(false) // 默认不显示
	const { x, y } = useWindowScroll() // x,y 轴
	watch: (y, (oldVal, newVal) => { // 监听变化,做出判断
		newVal > 78 ? show.value = true : show.value = false
		})
	return { show, y }
	}
}
</script>

注意: setup只会在组件创建时执行一次, 我们需要使用watch监听其数据变化

3. 使用vue2x 版本实现

<template>
<div class="app-header-sticky" :class="{show: showNav}">
</template>

<script>
export default {
	data() {
		return {
			show: false
		}
	},
	mounted() {
	// 监听页面滚动事件
		window.addEventListener('scroll', () => {
			const dist = document.documentElement.scrollTop // 页面滚动距离
			dist > 78 ? this.show = true : this.show = flase
		})
	}
}
</script>