30秒实现Vue吸顶效果
Vue 实现 效果 30 吸顶
2023-06-13 09:16:46 时间
1、滚动前:
2、滚动中:
3、滚动超过后:
直观效果可参pc端微博左侧的信息栏
第一步:html 中:
在你要实现吸顶效果的div上,加上如下这一行代码:
:class="{'is_fixed' : isFixed}"
触发吸顶效果的位置,如下:
<div id="boxFixed"></div>
第二步:data 定义中:
data() {
return {
isFixed: false,
offsetTop: 0,
}
}
第三步:在 mounted 与 destroyed 中
mounted() {
window.addEventListener('scroll', this.initHeight);
this.$nextTick(() => {
//获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
this.offsetTop = document.querySelector('#boxFixed').offsetTop;
})
},
//回调中移除监听
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
},
第四步:在 methods 方法定义中:
/********* start-目录吸顶********/
initHeight() {
// 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
//如果被卷曲的高度大于吸顶元素到顶端位置 的距离
this.isFixed = scrollTop > this.offsetTop ? true : false;
},
/********* end-目录吸顶********/
最后一步:在css中:
.is_fixed{
width: 100%;
position: fixed;
top: 0;
z-index: 999;
}
相关文章
- VUE v-for 数据引用
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- vue md5.js_VUE.js
- Vue组件库实现按需引入可以这么做
- VUE组件封装_vue组件内部双向绑定
- vue生成二维码并保存图片_vue实现扫描二维码
- vue遍历渲染数组「建议收藏」
- fasdmin+uniapp网站解决跨域问题(vue网页+tp接口跨域)
- 在线图书借阅网站( Python +Vue 实现)
- Vue前后端页面下载功能实现演示,Python+flask提供后台下载服务
- vue中v-if和v-show的区别
- 每日一题之Vue的异步更新实现原理是怎样的?_2023-02-23
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)