Vue实现导航吸顶效果的教程详解
作者：前端怎么个事
在浏览器上下滚动的时候,如何距离顶部的距离大于78px,吸顶显示,小于78px则隐藏,所以本文小编给大家介绍了Vue设置导航吸顶的详细教程,文中有相关的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
在浏览器上下滚动的时候，如何距离的顶部的距离大于78px,吸顶显示，小于78px则隐藏
工具类安装：npm i @vueuse/core
创建吸顶页面 fixed.vue：
<script setup>
// vueUse
import { useScroll } from '@vueuse/core'
const { y } = useScroll(window)
</script>
<template>
<div class="app-header-sticky" :class="{ show: y > 78 }">
<div class="container">
<RouterLink class="logo" to="/" />
<!-- 导航区域 -->
<div class="right">
<RouterLink to="/">品牌</RouterLink>
<RouterLink to="/">专题</RouterLink>
</div>
</div>
</div>
</template>
<style scoped lang='scss'>
.app-header-sticky {
width: 100%;
height: 80px;
position: fixed;
left: 0;
top: 0;
z-index: 999;
background-color: #fff;
border-bottom: 1px solid #e4e4e4;
// 此处为关键样式!!!
// 状态一：往上平移自身高度 + 完全透明
transform: translateY(-100%);
opacity: 0;
// 状态二：移除平移 + 完全不透明
&.show {
transition: all 0.3s linear;
transform: none;
opacity: 1;
}
.container {
display: flex;
align-items: center;
}
.logo {
width: 200px;
height: 80px;
background: url("@/assets/images/logo.png") no-repeat right 2px;
background-size: 160px auto;
}
.right {
width: 220px;
display: flex;
text-align: center;
padding-left: 40px;
border-left: 2px solid $xtxColor;
a {
width: 38px;
margin-right: 40px;
font-size: 16px;
line-height: 1;
&:hover {
color: $xtxColor;
}
}
}
}
</style>
引用该组件：
效果：
到此这篇关于Vue设置导航吸顶的教程详解的文章就介绍到这了,更多相关Vue设置导航吸顶内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！