Vue实现导航吸顶效果的教程详解
更新时间:2024年01月26日 10:08:53 作者:前端怎么个事
在浏览器上下滚动的时候,如何距离顶部的距离大于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设置导航吸顶内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
ant-design-vue中的select选择器,对输入值的进行筛选操作
这篇文章主要介绍了ant-design-vue中的select选择器,对输入值的进行筛选操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10vue.js表单验证插件(vee-validate)的使用教程详解
这篇文章主要介绍了vue.js表单验证插件(vee-validate)的使用,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05前端vue按1920*1080设计图的页面适配屏幕缩放并适配4K屏详解
最近在做一个数据可视化的项目,整个项目全是大屏展示,期间也是遇到很多问题,最令人头疼的就是大屏的适配,下面这篇文章主要给大家介绍了前端vue按1920*1080设计图的页面适配屏幕缩放并适配4K屏的相关资料,需要的朋友可以参考下2022-11-11Vue 解决在element中使用$notify在提示信息中换行问题
这篇文章主要介绍了Vue 解决在element中使用$notify在提示信息中换行问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论