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>

举个🌰:

相关推荐
手握风云-2 分钟前
JavaEE 进阶第七期:Spring MVC - Web开发的“交通枢纽”(一)
前端·spring·java-ee
Rysxt_5 分钟前
Vue 集成富文本编辑器教程
前端·javascript·vue.js·富文本
开发者小天8 分钟前
React中的受控组件示例
前端·javascript·react.js
奋斗吧程序媛8 分钟前
request请求相关
前端·javascript·vue.js
dragoooon349 分钟前
[Linux网络基础——Lesson9.「TCP 全连接队列与 tcpdump 抓包」]
前端·git·github
光影少年15 分钟前
用vite还是webpack多,vite为什么快
前端·webpack·node.js
waeng_luo15 分钟前
[鸿蒙2025领航者闯关] 鸿蒙应用中如何管理组件状态?
前端·harmonyos·鸿蒙·鸿蒙2025领航者闯关·鸿蒙6实战·开发者年度总结
克喵的水银蛇17 分钟前
Flutter 通用列表项封装实战:适配多场景的 ListItemWidget
前端·javascript·flutter
WX-bisheyuange19 分钟前
基于Spring Boot的宠物商城网站设计与实现
前端·javascript·vue.js·毕业设计
9号达人19 分钟前
大家天天说的'银弹'到底是个啥?看完这篇你就明白了
前端·后端·程序员