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>

举个🌰:

相关推荐
哆啦A梦158812 分钟前
Vue3魔法手册 作者 张天禹 08_回顾TS中的-接口-泛型-自定义事件
前端·vue.js·typescript
星火开发设计18 分钟前
序列式容器:list 双向链表的特性与用法
开发语言·前端·数据结构·数据库·c++·链表·list
014-code24 分钟前
ESLint 详解
前端·eslint
GISer_Jing35 分钟前
前端营销I(From AIGC)
前端·aigc·ai编程
明月_清风42 分钟前
向 Native 借力:深度拆解 SIMD 加速与 Node.js 异步原生解析
前端·json
明月_清风1 小时前
无感监控:深度拆解监控 SDK 的性能平衡术与调度策略
前端·监控
键盘鼓手苏苏3 小时前
Flutter for OpenHarmony:markdown 纯 Dart 解析引擎(将文本转化为结构化 HTML/UI) 深度解析与鸿蒙适配指南
前端·网络·算法·flutter·ui·html·harmonyos
芭拉拉小魔仙9 小时前
企业级Vue项目的状态管理:从原理到实战架构
前端·vue.js·架构
恋猫de小郭9 小时前
丰田正在使用 Flutter 开发游戏引擎 Fluorite
android·前端·flutter
扶苏10029 小时前
Vue 3 响应式原理深度解析
前端·javascript·vue.js