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>

举个🌰:

相关推荐
Dragon Wu1 分钟前
Web前端 认证token的安全存储策略
前端·javascript·安全·react.js·前端框架
橙露3 分钟前
各类 Shell 优劣势深度解析与实战选型指南
前端·chrome
广州华水科技6 分钟前
单北斗GNSS在变形监测中的应用与发展探讨
前端
克里斯蒂亚诺更新11 分钟前
vue2 单文件组件加入浏览器的title和ico的方法
前端·javascript·html
芝芝葡萄25 分钟前
VsCode中使用Codex
前端·ide·vscode·编辑器·ai编程
wangmengxxw27 分钟前
SpringAI-mcp-入门案例
java·服务器·前端·大模型·springai·mcp
觉醒大王31 分钟前
简单说说参考文献引用
java·前端·数据库·学习·自然语言处理·学习方法·迁移学习
weixin_4492900132 分钟前
EverMemOS 访问外部(deepinfra)API接口
java·服务器·前端
鱼毓屿御37 分钟前
Tailwind CSS配置进阶
前端·css
Mr Xu_42 分钟前
Git常用指令
前端·git