vue实现头部吸顶描点

vue实现头部吸顶描点

效果：页面滚到具体位置时，顶部吸附（粘性定位），点击描点跳转到对应位置，滚到到对应位置描点自动切换。

html：使用elment ui，name对应每个位置的ref名称，

             <el-tabs @tab-click="jump" v-model="tabActive"><el-tab-pane label="基础信息" name="base" ></el-tab-pane><el-tab-pane label="经营信息" name="manage"></el-tab-pane><el-tab-panelabel="老板及对接人信息"name="boss"></el-tab-pane><el-tab-pane label="其它信息" name="other"></el-tab-pane></el-tabs>

举例：基础信息ref：

点击描点跳转具体位置方法：

 jump(e) {// 当前窗口正中心位置到指定dom位置的距离//页面滚动了的距离let height =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;//指定dom到页面顶端的距离let dom = this.$refs[e.name];let domHeight = dom.offsetTop + 60;//滚动距离计算var S = Number(height) - Number(domHeight);//判断上滚还是下滚if (S < 0) {//下滚S = Math.abs(S);window.scrollBy({ top: S, behavior: "smooth" });this.$refs.nav.style.position = 'fixed'this.$refs.nav.style.top = '0px'} else if (S == 0) {//不滚window.scrollBy({ top: 0, behavior: "smooth" });} else {//上滚S = -S;window.scrollBy({ top: S, behavior: "smooth" });}

滚到到对应位置描点自动切换方法：
mouted中添加监听滚动事件：

//给window添加一个滚动滚动监听事件
window.addEventListener('scroll', this.handleScroll)

具体方法

 handleScroll(){var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;console.log(scrollTop)if(scrollTop>170){this.$refs.nav.style.position = 'fixed'this.$refs.nav.style.top = '0px'if(scrollTop>170 && scrollTop<this.$refs['manage'].offsetTop){this.tabActive = 'base'}else if(scrollTop>this.$refs['manage'].offsetTop && scrollTop<this.$refs['boss'].offsetTop){this.tabActive = 'manage'}else if(scrollTop>this.$refs['boss'].offsetTop  && scrollTop<this.$refs['other'].offsetTop-500){this.tabActive = 'boss'}else if(scrollTop>this.$refs['other'].offsetTop-500 ){this.tabActive = 'other'}}else{this.$refs.nav.style.position = ''}}

vue实现头部吸顶描点相关推荐

Vue实现滚动吸顶，文案动态更改
Vue实现滚动吸顶,文案动态更改 1.效果和代码如下 <template><div class="record"><div class="c ...
Vue导航栏吸顶及滚动渐变色
@阿乐今天敲代码没效果图好几天没更新了,做一个小demo吧.导航栏吸顶,以及随页面滚动实现渐变色吸顶前: 吸顶后: 滚动渐变色: 一.实现 html: <div class="n ...
微信小程序导航头部吸顶效果
功能描述:当页面滚动到该元素的时候,变成固定的导航头部,也就是固定在最上面,当往回滑动时又变成原来的样子. 基本原理是: 1.获取要吸顶元素到页面顶部的高度 2.监听页面已经滚动的高度 3.将要吸顶元 ...
vue简单实现吸顶效果pc
首先看一下实现效果图,刚进页面的,是有一个头部: 当页面往下滑,tab的标签页就需要固定在头部,效果图如下: 看一下实现的代码: <template><div><div ...
vue列表项吸顶 js+css两种骚操作
demo需求:vue项目中,在列表里,滑动到哪个日期的时候,哪个日期就吸顶显示: js方法: 用js的方法思路:获取每一项item的底部距离顶部的高度,把所有的高度放在一个数组里面,在去循环比对,在使 ...
vue中怎么实现吸顶效果
在 web 应用中,我们经常需要让页面中的一个或多个元素在页面滚动时保持固定位置.这种效果通常被称为吸顶效果,因为它使元素像粘在页面顶部一样固定不动. 在 Vue 中,实现吸顶效果有不同的方法.本文将 ...
vue移动端表格吸顶、行自适应高度、列左侧固定悬浮
简介 1.表头吸顶效果 2.左侧列固定,右侧滑动,表头跟随内容滑动 3.行高自适应番外最近上海疫情,居家办公一月多了,愿阴霾散去.最近网上在正常得市民抱怨中,有很多别有用心之人,数典忘祖,造谣生事 ...
2021-12-02 vue移动端卖座电影项目(五) 封装Film下的二级路由,FilmHeader实现吸顶效果
文章目录 1.封装Film下的二级路由目的/效果步骤 2.让FilmHeader.vue实现向下滑动时的吸顶效果(固钉效果) 思路步骤最终效果 3.离开Film页面时取消触发handleScr ...
[项目技巧]VUE小米商城+跨域+sass编译器封装+吸顶功能
前端跨域三种方案什么是跨域解决方法 CORS 后端修改 JSOP跨域安装插件 JSONP和CORS跨域的区别? JSONP通过js携带请求进行跨域,他不是传统的XHR请求:CORS后台处理跨域 ...

vue实现头部吸顶描点

vue实现头部吸顶描点相关推荐

最新文章

热门文章