vue简单实现吸顶效果pc

首先看一下实现效果图,刚进页面的,是有一个头部:

当页面往下滑,tab的标签页就需要固定在头部,效果图如下:

看一下实现的代码:

<template><div><div class="top-header">这是头部</div><div id="boxFixed" :class="{ is_fixed: isFixed }"><el-tabs v-model="activeName" type="card" @tab-click="handleClick"><el-tab-pane label="自身风险" name="自身风险"><span slot="label" class="f16">自身风险</span></el-tab-pane><el-tab-pane label="周边风险" name="周边风险"><span slot="label" class="f16">周边风险</span></el-tab-pane><el-tab-pane label="变更风险" name="变更风险"><span slot="label" class="f16">变更风险</span></el-tab-pane><el-tab-pane label="经营风险" name="经营风险"><span slot="label" class="f16">经营风险</span></el-tab-pane><el-tab-pane label="历史风险" name="历史风险"><span slot="label" class="f16">历史风险</span></el-tab-pane><el-tab-pane label="预警提醒" name="预警提醒"><span slot="label" class="f16">预警提醒</span></el-tab-pane></el-tabs></div><div class="container"><div v-for="item in 100" :key="item" class="item">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div></div></div></div>
</template><script>export default {data() {return {activeName: '自身风险',isFixed: false,offsetTop: 0,}},created() {},mounted() {//监听滚动window.addEventListener('scroll', this.initHeight)//执行下一步this.$nextTick(() => {this.offsetTop = document.querySelector('#boxFixed').offsetTop //吸顶距离顶部的距离})},destroyed() {window.removeEventListener('scroll', this.handleScroll) //在销毁的生命周期取消监听事件,提高性能},methods: {initHeight() {var scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop //计算滚动条距离顶部的距离this.isFixed = scrollTop > this.offsetTop ? true : false//当滚动条大于吸顶距离顶部的距离试,就加上css样式},//tab切换handleClick() {},},}
</script><style lang="scss" scoped>::v-deep {.el-tabs--card > .el-tabs__header .el-tabs__nav {display: flex;width: 100%;background-color: rgb(223, 231, 235);}.el-tabs--card > .el-tabs__header .el-tabs__nav {border: none;}.el-tabs--card > .el-tabs__header .el-tabs__item {border-left: none !important;}.el-tabs__item {flex: 1;text-align: center;font-weight: 400;color: #596078;height: 46px;}.el-tabs__item.is-active {background: #e6f2ff;font-size: 16px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #2991ff;}.el-tabs__header {margin: 0;border-color: #fafafa;}}.top-header{width: 100%;height: 100px;background-color: #eae;color: #fff;text-align: center;line-height: 100px;}.container {width: 100%;line-height: 40px;.item{text-indent: 130px;}}.is_fixed {position: fixed;top: 90px;z-index: 999;background-color: #fafafa;width: 100%;}
</style>

完结!

vue简单实现吸顶效果pc相关推荐

vue中怎么实现吸顶效果
在 web 应用中,我们经常需要让页面中的一个或多个元素在页面滚动时保持固定位置.这种效果通常被称为吸顶效果,因为它使元素像粘在页面顶部一样固定不动. 在 Vue 中,实现吸顶效果有不同的方法.本文将 ...
vue开发（三）vue-scroller实现下拉刷新，上拉加载笔记（包括吸顶效果失效的问题）
项目中要实现下拉刷新,上拉加载,首先想到了vue-scroller. npm网址:vue-scroller 简单记录一下自己的使用过程,以备不时之需. 安装依赖: npm install vue-sc ...
30秒实现Vue吸顶效果
酱酱,好久不见鸭! 前言:吸顶效果图: 1.滚动前: image.png 2.滚动中: image.png 3.滚动超过后: image.png 直观效果可参pc端微博左侧的信息栏第一步:html ...
vue音乐项目歌手页面滚动、吸顶效果
总结singer页面: 1.api中去获取 ['热',A-Z] 以及根据['热',A-Z]获取的所有歌手的数据 2.渲染数据 2.1 渲染左边字母title ['热',A-Z] + 该字母开头的歌手 ...
微信小程序导航栏或菜单栏吸顶效果简单实现
微信小程序导航栏或菜单栏吸顶效果简单实现思路: 1.获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法) 2.监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3.当s2> ...
Vue实现导航栏吸顶效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
2021-12-02 vue移动端卖座电影项目(五) 封装Film下的二级路由,FilmHeader实现吸顶效果
文章目录 1.封装Film下的二级路由目的/效果步骤 2.让FilmHeader.vue实现向下滑动时的吸顶效果(固钉效果) 思路步骤最终效果 3.离开Film页面时取消触发handleScr ...
最贴近京东首页体验的嵌套滑动吸顶效果
吸顶效果是各家 App 或多或少都会用的一个交互,这种交互也常见于 PC.H5,可以说是一种通用性很强的前端交互体验,相比较来说京东首页的嵌套滑动吸顶效果是各个类似效果中体验比较好的一个,因为在嵌套布 ...
axure9怎么让页面上下滑动_Axure制作：页面上下滑动时的菜单栏悬浮吸顶效果
昆仑女神的故事,sem优化,破产管理人在移动端页面上,用手上下滑时,超过一定向上滑动时,菜单栏能有吸顶效果,如何用axure实现呢? 作者在最近在手机移动端的时候,有一个动画,希望达到效果:用手上下 ...

vue简单实现吸顶效果pc

vue简单实现吸顶效果pc相关推荐

最新文章

热门文章