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>

举个🌰:

相关推荐
申阳4 分钟前
Day 22:SpringBoot4 + Tauri 2.0(VUE) 登录功能前后端联调
前端·后端·程序员
晴殇i14 分钟前
性能飞跃!这几个现代浏览器API让页面加载速度提升至90+
前端·javascript·面试
孟祥_成都15 分钟前
nest.js / hono.js 一起学!开发前必备!
前端·node.js
Hilaku17 分钟前
检测开发者工具是否打开?这几种方法让黑客无处遁形🤣
前端·javascript·前端框架
qq_3168377519 分钟前
uniapp 缓存指定接口的响应,在无网络时使用缓存数据
前端·uni-app
GIS开发特训营20 分钟前
2025年华中农业大学暑期实训优秀作品(4):智慧煤仓监控系统平台——重塑煤炭仓储管理新模式
前端·vue.js·信息可视化
腾讯云云开发24 分钟前
【CloudBase MCP 升级福利】你的AI开发搭子已进化!晒出AI Coding项目领取周边礼品
前端·后端·小程序·云开发
Web极客码26 分钟前
如何在WordPress网站中添加Cookie弹窗
前端·安全·github·wordpress
这儿有一堆花26 分钟前
从 Markdown 到 HTML 的正确构建路径
前端·html
LeeAt37 分钟前
手搓一个 Ollama 本地 SSE 全栈聊天助手
前端