vue-sticky简单使用(实现吸顶效果)

参考链接

vue-sticky:在页面滚动时将指定元素固定在窗口上的某个位置

生效条件如下:
1、父元素不能设置 overflow:hidden 或者 overflow:auto 属性
2、至少指定 top 、bottom 、left 、right 4 个值中的一个,否则只会处于相对定位
3、父元素的高度不能低于 sticky 元素的高度
4、sticky 元素仅在其父元素内生效

一、安装

npm install vue-sticky --save

二、引入

import VueSticky from 'vue-sticky'
directives: {
  'sticky': VueSticky,
},

在这里插入图片描述
三、页面使用

<ELEMENT v-sticky="{ zIndex: NUMBER, stickyTop: NUMBER, disabled: [true|false]}">
  <div> <!-- sticky wrapper, IMPORTANT -->
    CONTENT
  </div>
</ELEMENT>

举个🌰:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/41890.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

云曦期末复现

serialize 代码审计&#xff0c;给1传参&#xff0c;满足password的值为yunxi&#xff0c;那么反序列化前就会执行__wakeup函数&#xff0c;从而得到flag.php&#xff0c;但是password的值被定死为1&#xff0c;利用PHP反序列化的字符逃逸: <?php error_reporting(0); hig…

android studio 离线打包配置push模块

1.依赖引入 SDK\libs aps-release.aar, aps-unipush-release.aar, gtc.aar, gtsdk-3.2.11.0.aar, 从android studio的sdk中找到对应的包放到HBuilder-Integrate-AS\simpleDemo\libs下面 2.打开build.gradle&#xff0c;在defaultConfig添加manifestPlaceholders节点&#xff0c…

【数据结构导论】第 7 章:排序

目录 一、概述 &#xff08;1&#xff09;基本概念 &#xff08;2&#xff09;排序分类 &#xff08;3&#xff09;排序文件的物理表示 —— 数组表示 二、插入排序&#xff08;通过比较插入实现排序&#xff09; &#xff08;1&#xff09;直接插入排序 ① 过程 ② 算…

SqlServer数据库【基础-更删改查】

一、创建语句 &#xff08;1&#xff09;创建数据库 1.检查系统中是否存在这个数据库&#xff0c;存在则删除 格式&#xff1a; if exists(select * from sysdatabases where name数据库名) drop database 数据库名 go例子&#xff1a; if exists(select * from sysdataba…

C 知识积累 替换gets函数 Linux C 语法分析 switch和if else的比较

目录 替换gets函数gets()用处gets()的危险之处gets()的几种替代方法一、用%c循环输入直到遇到换行结束二、用getchar()循环输入直到遇到换行结束三、scanf的另一种用法四、c中的getline()方法五、解决方案使用fgets代替 回车与换行一.知其然二.知其所以然 关键字&#xff0c;操…

BI-SQL丨XML

XML SQL Server中&#xff0c;存在一种特殊类型的数据&#xff0c;就是XML数据类型。 可能看到这里&#xff0c;小伙伴都会产生疑惑&#xff0c;XML不是Web语言么&#xff1f;为什么在SQL Server里面也会有XML数据类型&#xff1f; 这个就要从SQL Server的应用开始说起了&am…

JavaSwing+MySQL的酒店管理系统

点击以下链接获取源码&#xff1a; https://download.csdn.net/download/qq_64505944/88063706?spm1001.2014.3001.5503 JDK1.8、MySQL5.7 功能&#xff1a;散客开单&#xff1a;完成散客的开单&#xff0c;可一次最多开5间相同类型的房间。 2、团体开单&#xff1a;完成团体…

photoshop制作法线和凹凸贴图

做个选区 Ctrlj 法线贴图 生成凹凸贴图

如何避免在C#中出现混乱代码

文章目录 一、溯源&#xff1a;混乱代码出现的原因 二、陷阱&#xff1a;混乱代码会使你焦头烂额 三、10招&#xff1a;避免出现混乱代码 四、写在最后&#xff1a;不与混乱代码纠缠 意大利面是一种很好吃的食物&#xff0c;但是&#xff0c;如果用它来形容代码意味着这种程…

伙伴云CEO戴志康:我们为什么要做伙伴云?

分享嘉宾&#xff1a;戴志康&#xff0c;伙伴云CEO 以下为演讲实录⬇⬇⬇ 01选择人更少的一条路&#xff0c;从B级走向A级 我一直想和大家交流一个话题&#xff0c;关于我们为什么要做伙伴云。既代表我自己&#xff0c;同时也代表我们团队的一些想法。 我是一个怀疑论者。大…

centos7.6下安装mysql

1.下载yum源&#xff1a; wget https://dev.mysql.com/get/mysql80-community-release-el7-5.noarch.rpm2.执行安装&#xff1a; rpm -ivh mysql80-community-release-el7-5.noarch.rpm3.开始安装 yum install -y mysql-server4.启动mysql服务 systemctl start mysqld5.查看…

Docker 应用容器引擎

Docker 应用容器引擎 一、Docker是什么二、Docker安装和查看1、docker安装2、docker版本信息查看3、docker信息查看 三、镜像操作四、容器操作1、容器创建2、创建并启动容器3、容器的进入4、复制5、容器的导入和导出6、删除容器 一、Docker是什么 是一个开源的应用容器引擎&…

【自监督预训练 2023】MCL

【自监督预训练 2023】MCL 论文题目&#xff1a;Multi-Level Contrastive Learning for Dense Prediction Task 中文题目&#xff1a;稠密预测任务的多级对比学习 论文链接&#xff1a;https://arxiv.org/abs/2304.02010 论文代码&#xff1a;https://github.com/GuoQiushan/MC…

i.MX6Q应用处理器:MCIMX6Q5EYM12AD/MCIMX6Q5EYM10AE/MCIMX6Q5EYM10ADR 4核、32位,624-LFBGA

i.MX6Q 处理器代表了集成多媒体应用处理器的最新成就。这些处理器是不断增长的多媒体产品系列的一部分&#xff0c;这些产品提供高性能处理&#xff0c;并针对最低功耗进行了优化。 i.MX6Quad处理器采用先进的四核ArmCortex-A9内核&#xff0c;运行速度高达1.2 GHz。它们包括2…

浏览器打开PDF标题乱码

问题 使用 itext5 用pdf模板生成预览pdf乱码问题 解决办法 使用pdf编辑器打开之后&#xff0c;选择 文件>> 属性&#xff0c; 修改乱码的标题。

ENSP实验一:防火墙基础配置

1、搭建拓扑图 配置client&#xff08;内网&#xff09;、FTP Server&#xff08;外网&#xff09;的IP地址 客户端设置&#xff1a; 服务端设置&#xff1a; 2、配置防火墙命名 进入防火墙&#xff0c;输入密码&#xff1a;默认为admin123 <USG6000V1>system-view /…

linux 安装pytorch3d的坑

事实上&#xff0c;只要按照官方文档的说明就可以完美安装。其中坑的地方在于conda的管理可能会导致下载的版本不符合你的要求&#xff08;例如下载成了cpu版本、下载的cuda版本&#xff09;而同样尝试使用源码编译以及其他方式下载库都会导致同样的问题&#xff0c;这里主要的…

Centos 7 使用国内镜像源更新内核

内核选择参考 此博文 &#xff1a;https://blog.csdn.net/alwaysbefine/article/details/108931626 elrepo官网介绍的内核升级方式为&#xff1a; 一、按文档执行引入 elrepo库&#xff1b; # 1、引入公钥 rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org# 2、安…

回归预测 | MATLAB实现基于SVM-Adaboost支持向量机结合AdaBoost多输入单输出回归预测

回归预测 | MATLAB实现基于SVM-Adaboost支持向量机结合AdaBoost多输入单输出回归预测 目录 回归预测 | MATLAB实现基于SVM-Adaboost支持向量机结合AdaBoost多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于SVM-Adaboost支持向…

left join 和except方法区别和联系

目录 相同点&#xff1a; left join except 不同点 假设有两个表&#xff1a;A客户表 和 B客户表&#xff0c;客户uid是唯一主键 相同点&#xff1a; 查询在A中的客户 但不在B中&#xff0c;也就是图中的阴影部分&#xff0c;left join 和except方法都可以实现 left join …