vue实现吸顶、锚点和滚动高亮按钮效果实现吸顶、锚点和滚动高亮按钮效果
主要介绍了vue实现一个简单的吸顶、锚点和滚动高亮按钮效果,需要的朋友可以参考下
因公司后台管理系统很多功能技术老旧，最近在用vue重构公司的后台管理系统，在做商品管理添加商品这一块，借鉴淘宝的
添加商品的交互，需要实现一个简单的吸顶、锚点和滚动高亮按钮的效果。
需求需求
1. 滚动页面到顶部，实现某元素固定到顶部效果
2. 点击某个按钮，页面滚动到相应的位置
3. 滚动页面，当到达某个位置时，高亮对应的相关按钮
元素吸顶实现方式元素吸顶实现方式
关于元素吸顶效果，通过查阅相关资料和相关测试，有三种方式（还有一种是jquery的方法，这里就不介绍了）
一、使用一、使用position:sticky
1. 什么是什么是position:sticky?
粘性定位元素相当于position:relative和position:sticky的结合体，受限于父级元素，在不同的条件下呈现出不同的页面效果
2. 如何使用如何使用sticky？？
sticky元素效果完全受限于父级元素，使用条件：
1.sticky元素的父元素的overflow只能设置为visible，否则会导致没有粘滞效果
2.sticky元素的父元素不能设置固定的高度，否则会导致没有粘滞效果
3.sticky满足条件变成fixed定位时，与标准fixed元素不一样，不会脱离文档流
4.sticky 定位的元素不能添加一个只包含自身的父元素,会导致没有粘滞效果
5.同一个父级元素中的sticky元素，如果定位值相等，则会重叠，如果属于不同父级元素中，则会挤掉之前的元素，形成依次
占位的效果 具体实现效果如下：
.sticky-box{
position: sticky;
position: -webkit-sticky;
top: 60px; //可通过js动态设置
}
3.兼容性兼容性
通过查看can i use 可以看到相关的兼容性：
可以看出这个属性的兼容性不是那么好，如果项目需要兼容到ie11等的话，就不是那么适用了
二、使用二、使用offsetTop**
HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。因此我们需要注意的
是，在监听页面滚动的过程中，需要将定位父级元素的偏移量也计算在内，可以如下写法：
//获取当前元素的offsetTop
getOffsetTop(obj) {
let offsetTop = 0;
while (obj != window.document.body && obj != null) {
offsetTop += obj.offsetTop;
obj = obj.offsetParent;
}
return offsetTop;
}
通过在vue的mounted生命周期函数中添加监听事件滚动的事件：
mounted() {
/**通过给变成固定定位的元素添加一个同等高度的父元素，防止该元素变成固定定位时，脱离文档流导致的页面抖动 */
this.tabsHeight = this.$refs.elTabs.offsetHeight;
window.addEventListener("scroll", this.handleScroll);
},
weixin_38672962
- 粉丝: 4
- 资源: 934
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
- SPC统计方法基础知识.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0