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>

举个🌰:

相关推荐
JustHappy24 分钟前
「chrome extensions🛠️」我写了一个超级简单的浏览器插件Vue开发模板
前端·javascript·github
Loo国昌25 分钟前
Vue 3 前端工程化:架构、核心原理与生产实践
前端·vue.js·架构
sg_knight28 分钟前
拥抱未来:ECMAScript Modules (ESM) 深度解析
开发语言·前端·javascript·vue·ecmascript·web·esm
LYFlied29 分钟前
【每日算法】LeetCode 17. 电话号码的字母组合
前端·算法·leetcode·面试·职场和发展
开发者小天29 分钟前
react中useEffect的用法,以及订阅模式的原理
前端·react.js·前端框架
前端白袍1 小时前
Vue:如何实现一个具有复制功能的文字按钮?
前端·javascript·vue.js
new code Boy2 小时前
escape谨慎使用
前端·javascript·vue.js
叠叠乐2 小时前
robot_state_publisher 参数
java·前端·算法
Kiri霧2 小时前
Range循环和切片
前端·后端·学习·golang