position:sticky-粘性吸附布局
一、描述
就是在一个滚动的容器里,将一个子元素设置为postion:sticky 在元素显示在可视区域内,显示的效果与position:relative 一致,当元素被滑动出可视区域外是,显示效果与position:fixed一致
二、注意事项
1、父元素需要存在滚动(overflow:auto,overflow:scroll),否则postion:sticky不生效;
2、sticky元素必须配置top、right、bottom、left其中之一,否则postion:sticky不生效;
3、父元素的高度不能低于sticky元素元素高度,否则postion:sticky不生效;
三、效果
1、吸顶效果
【1】code
html
<div class="parent-content"><div class="sticky">吸顶</div><div class="content"><p>我是内容</p><p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> </div>
</div>
css
.parent-content {width: 400px;height: 400px;background-color: #bfbfbf;overflow: auto;
}
.sticky{position:sticky;top:0;width: 100%;height: 40px;background-color: lightseagreen;}
.content {width: 100%;height: 600px;background-color:thistle;
}
效果
默认效果

滚动效果

2、折叠面板
html:
<button (click)='createComponent()'>创建组件</button>
<button (click)='removeComponent()'>删除组件</button>
<ng-container #container></ng-container>
<div class="parent-content"><div class="sticky sticky-1">吸顶1</div><div class="content"><p>我是内容</p><p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> <p>我是内容</p> </div><div class="sticky sticky-2">吸顶2</div><div class="content"><p>我是内容2</p><p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p><p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p> </div><div class="sticky sticky-3">吸顶3</div><div class="content"><p>我是内容3</p><p>我是内容3</p> <p>我是内容3</p> <p>我是内容3</p> <p>我是内容3</p> <p>我是内容3</p> </div>
</div>
css
.parent-content {width: 400px;height: 400px;background-color: #bfbfbf;overflow: auto;
}
.content {width: 100%;height: 600px;background-color:thistle;
}.sticky {position:sticky; width: 100%;height: 40px;}.sticky-1 {top:0;background-color: lightseagreen;}.sticky-2 {top:40px; /* top值是sticky内容1倍 */background-color:blue;}.sticky-3 {top:80px; /* top值是sticky内容2倍 */background-color:blueviolet;}
效果;
默认效果

滚动时效果

折叠后效果

相关文章:
position:sticky-粘性吸附布局
一、描述 就是在一个滚动的容器里,将一个子元素设置为postion:sticky 在元素显示在可视区域内,显示的效果与position:relative 一致,当元素被滑动出可视区域外是,显示效果与position:fixed一致 二、注意事项 1、父元素需要存在滚动(overflow:auto&…...
【MySQL】-【数据库的设计规范】
文章目录 为什么需要数据库设计范式范式简介范式都包括哪些键和相关属性的概念第一范式(1st NF)第二范式(2nd NF)第三范式(3rd NF) 反范式化概述应用举例反范式化的新问题反范式的适用场景 BCNF(巴斯范式)案例案例一案例二 第四范式案例案例一案例二 第五范式、域键范式范式的实…...
全面解析缓存应用经典问题
1、前言 随着互联网从简单的单向浏览请求,发展为基于用户个性信息的定制化以及社交化的请求,这要求产品需要做到以用户和关系为基础,对海量数据进行分析和计算。对于后端服务来说,意味着用户的每次请求都需要查询用户的个人信息和…...
Java版本企业电子招采系统源码——信息数智化招采系统
信息数智化招采系统 服务框架:Spring Cloud、Spring Boot2、Mybatis、OAuth2、Security 前端架构:VUE、Uniapp、Layui、Bootstrap、H5、CSS3 涉及技术:Eureka、Config、Zuul、OAuth2、Security、OSS、Turbine、Zipkin、Feign、Monitor、Stre…...
Rust每日一练(Leetday0005) 罗马数字、公共前缀、三数之和
目录 13. 罗马数字转整数 Roman to Integer 🌟 14. 最长公共前缀 Longest Common Prefix 🌟 15. 三数之和 3Sum 🌟🌟 🌟 每日一练刷题专栏 🌟 Rust每日一练 专栏 Golang每日一练 专栏 Python每日…...
【告别校园,迎接未来】
作为一个曾经的大学生,我的四年大学时光充满了起伏和挑战。回顾这段时光,我深刻认识到了自己的不足,同时也感悟了一些珍贵的人生经验和收获。 我是一个比较内向的人,进入大学后感觉有些孤独,难以适应新的环境和生活方…...
SaaS系统用户权限设计
SaaS系统用户权限设计 学习目标: 理解RBAC模型的基本概念及设计思路 了解SAAS-HRM中权限控制的需求及表结构分析完成组织机构的基本CRUD操作 完成用户管理的基本CRUD操作完成角色管理的基本CRUD操作 组织机构管理 需求分析 需求分析 实现企业组织结构管理࿰…...
我们为什么还要学习Altium Designer?
Altium Designe(简称“AD”)是电子设计领域中备受推崇的软件工具之一,拥有强大的功能和灵活的设计环境,也是要用最广泛的EDA工具之一,为电子工程师提供了无限可能,但很多工程师学完AD基本操作就转投其他EDA…...
Q1业绩整体回暖,影视行业找到增长新路径
凛冬已过,影视行业恢复了生机。 数据显示,今年一季度,影视院线板块全部上市公司分别实现营收、归母净利111.86亿元、10.15亿元,同比增幅为1.44%和53.76%。在经济复苏的背景下,影视行业实现了扭亏为盈和跨越式增长。 …...
Zabbix
概述 作为一个运维,需要会使用监控系统查看服务器系统性能、应用服务状态和网站流量指标等,利用监控系统的数据去了解网站上线发布的结果和健康状态。 利用一个优秀的监控软件,我们可以: ●通过一个友好的界面进行浏览整个网站所有的服务器…...
OpenHarmony支持HDMI接口声卡适配说明
高清多媒体接口(High Definition Multimedia Interface,HDMI )是一种全数字化视频和声音发送接口,可以发送未压缩的音频及视频信号。HDMI可用于机顶盒、DVD播放机、个人计算机、电视、游戏主机、综合扩大机、数字音响与电视机等设…...
AtCoder Beginner Contest 300G - P-smooth number解题报告
AtCoder Beginner Contest 300G - P-smooth number解题报告 1 题目链接 传送门 2 题目大意 题目:P-光滑数的数量 题目大意: 在 1 1 1 到 n n n 中,有多少个数的所有质因数均不超过 p ( p ≤ 100 ) p\ (p\leq100) p (p≤100)。 3 解…...
数据分析与预处理常用的图和代码
1.训练集和测试集统计数据描述之间的差异作图: def diff_color(x):color red if x<0 else (green if x > 0 else black)return fcolor: {color}(train.describe() - test.describe())[features].T.iloc[:,1:].style\.bar(subset[mean, std], alignmid, colo…...
Http与Https 比较
目录 1、HTTP(HyperText Transfer Protocol:超文本传输协议) 2、HTTPS(Hypertext Transfer Protocol Secure:超文本传输安全协议) 3、HTTP 与 HTTPS 区别 4、HTTPS 的工作原理 1、HTTP(HyperTex…...
02 面向对象( 继承,抽象类)
强调:一定用自己的话总结,避免抄文档,否则视为作业未完成。 this关键字的作用 为了解决成员变量和局部变量所存在的二义性,适用于有参构造时使用 示例 private String name;private int age;public person(){}public person(String name,i…...
[C++]22种设计模式的C++实现大纲
前言 最近看遍全网,准备整理一套较好上手的设计模式文章,以便后续复习到处翻找,在此记录一下,如有侵权可以联系删除, 每天更新一篇,直到更新完 前置知识 UML类图与面向对象编程C UML类图详解软件设计原则与SOLID原则…...
用Powerpoint (PPT)制作并导出矢量图、高分辨率图
论文写作时经常需要导入矢量图,正规军都是用AI或者Inkscape作图,但是PPT更加适合小白用户,或者一些简单的构图需求使用PPT更加便捷,而且不得不承认PPT的某些功能是真的香,例如:简单的对齐、文字插入和格式修…...
小白量化《穿云箭集群量化》(9)用指标公式实现miniQMT全自动交易
小白量化《穿云箭集群量化》(9)用指标公式实现miniQMT全自动交易 在穿云箭量化平台中,支持3中公式源码运行模式,还支持在Python策略中使用仿指标公式源码运行,编写策略。 我们先看如何使用指标公式源码。 #编程_直接使…...
java Class类详解
Class类简介 在 java 世界里,一切皆对象。从某种意义上来说,java 有两种对象:实例对象和 Class 对象。每个类的运行时的类型信息就是用 Class 对象表示的,它包含了与类有关的信息,实例对象就是通过 Class 对象来创建的…...
DMGI:Unsupervised Attributed Multiplex Network Embedding
[1911.06750] Unsupervised Attributed Multiplex Network Embedding (arxiv.org) 目录 Abstract 1 Introduction 2 DGI 3 Deep Multiplex Graph Infomax: DMGI 特定关系类型的节点嵌入 Joint Modeling and Consensus Regularization Extension to Semi-Supervised Lea…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上,开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识,在 vs 2017 平台上,进行 ASP.NET 应用程序和简易网站的开发;初步熟悉开发一…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程,代码下载:这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中,**知识蒸馏(Knowledge Distillation)**被广泛应用,作为提升模型…...
虚拟电厂发展三大趋势:市场化、技术主导、车网互联
市场化:从政策驱动到多元盈利 政策全面赋能 2025年4月,国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》,首次明确虚拟电厂为“独立市场主体”,提出硬性目标:2027年全国调节能力≥2000万千瓦࿰…...
RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发,后来由Pivotal Software Inc.(现为VMware子公司)接管。RabbitMQ 是一个开源的消息代理和队列服务器,用 Erlang 语言编写。广泛应用于各种分布…...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...
Razor编程中@Html的方法使用大全
文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...
