vue-sticky简单使用(实现吸顶效果)

参考链接

vue-sticky:在页面滚动时将指定元素固定在窗口上的某个位置

生效条件如下:
1、父元素不能设置 overflow:hidden 或者 overflow:auto 属性
2、至少指定 top 、bottom 、left 、right 4 个值中的一个,否则只会处于相对定位
3、父元素的高度不能低于 sticky 元素的高度
4、sticky 元素仅在其父元素内生效

一、安装

bash 复制代码
npm install vue-sticky --save

二、引入

bash 复制代码
import VueSticky from 'vue-sticky'
js 复制代码
directives: {
  'sticky': VueSticky,
},

三、页面使用

html 复制代码
<ELEMENT v-sticky="{ zIndex: NUMBER, stickyTop: NUMBER, disabled: [true|false]}">
  <div> <!-- sticky wrapper, IMPORTANT -->
    CONTENT
  </div>
</ELEMENT>

举个🌰:

相关推荐
苑若轻航8 小时前
防抖和节流:解决高频事件性能
前端
小黑的铁粉8 小时前
什么是事件循环?调用堆栈和任务队列之间有什么区别?
前端·javascript
小黑的铁粉8 小时前
常见的内存泄漏有哪些?
前端·javascript
喝水的长颈鹿8 小时前
JavaScript 基础入门
前端
喝咖啡的女孩8 小时前
call、apply、bind 原理与实现
前端
雨落Re8 小时前
从设计到开发,过年我用十天使用AI搭建了一个完整的博客系统
前端·后端
追风筝的人er8 小时前
企业管理系统如何实现自定义首页与千人千面?RuoYi Office 给出了完整方案
vue.js·spring boot·spring cloud
冴羽8 小时前
100s 带你了解 Bun 为什么这么火
前端·node.js·bun
Sylvia33.8 小时前
火星数据:解构斯诺克每一杆进攻背后的数字语言
java·前端·python·数据挖掘·数据分析
TT_Close8 小时前
“啪啪啪”三下键盘,极速拉起你的 uni-app 项目!
vue.js·uni-app·前端工程化