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>

举个🌰:

相关推荐
布列瑟农的星空15 小时前
WebAssembly入门(一)——Emscripten
前端·后端
贵州数擎科技有限公司15 小时前
一批优质 AI 域名转让(.ai)|适合 AI 创业 / 产品 / 公司品牌
前端
小二·15 小时前
微前端架构完全指南:qiankun 与 Module Federation 双方案深度对比(Vue 3 + TypeScript)
前端·架构·typescript
EndingCoder16 小时前
枚举类型:常量集合的优雅管理
前端·javascript·typescript
Electrolux16 小时前
[wllama]纯前端实现大语言模型调用:在浏览器里跑 AI 是什么体验。以调用腾讯 HY-MT1.5 混元翻译模型为例
前端·aigc·ai编程
sanra12316 小时前
前端定位相关技巧
前端·vue
起名时在学Aiifox16 小时前
从零实现前端数据格式化工具:以船员经验数据展示为例
前端·vue.js·typescript·es6
oMcLin16 小时前
如何在Manjaro Linux上配置并优化Caddy Web服务器,确保高并发流量下的稳定性与安全性?
linux·服务器·前端
码途潇潇17 小时前
JavaScript 中 ==、===、Object.is 以及 null、undefined、undeclared 的区别
前端·javascript
之恒君17 小时前
Node.js 模块加载 - 4 - CJS 和 ESM 互操作避坑清单
前端·node.js