当前位置：首页 > news >正文

CSS——sticky定位

news 2025/7/6 18:23:53

1. 大白话解释sticky定位

粘性定位通俗来说，它就是相对定位relative和固定定位fixed的结合体，它的触发过程分为三个阶段

在最近可滚动容器没有触发滑动之前，sticky盒子的表现为相对定位relative【第一阶段】，

但当最近可滚动容器触发滚动，父元素出现在最近可滚动容器的可视区并且滚动距离达到粘性定位sticky的要求时（比如top: 100px），sticky盒子的表现为固定定位fixed【第二阶段】，

接着滚动，当sticky盒子的父元素消失在最近可滚动容器的可视区时，sticky盒子会重新表现为相对定位relative【第三阶段】，

也就是说它不再固定，会随着父元素消失在最近可滚动容器的可视区。

结合上面的描述，我们可以总结粘性定位的位置受两个东西的影响：

父元素：父盒子不在最近可滚动容器可视区时，sticky盒子始终表现为相对定位。
最近可滚动的容器：设置sticky时使用的top、left等属性是相对的就是可滚动的容器，只要容器的overflow不是visible【容器不设置overflow就默认是visible】那么容器就是可滚动容器，如果盒子的祖先们没找到可滚动容器，那么body就作为可滚动容器，因为body是默认可滚动的。

2. 代码体会sticky定位

下面我们结合代码来理解：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin重叠问题</title><style>* {padding: 0;margin: 0;}.parent {width: 400px;height: 600px;background-color: tomato;overflow: visible;}.sticky {width: 200px;height: 200px;background-color: gold;/* 粘性定位 */position: sticky;top: 0px;}.box-top,.box-bot {width: 400px;background-color: pink;}.box-top {height: 200px;}.box-bot {height: 1000px;}</style>
</head><body><div class="box-top"></div><div class="parent"><div class="sticky">吸顶盒子</div></div><div class="box-bot"></div>
</body></html>

在这里插入图片描述

3. sticky生效的情况

sticky失效情况有：

未指定top、right、bottom或left其中的一个
父元素的高度小于sticky元素
没有找准sticky元素需要参考的最近可滚动元素
如果参考的可滚动元素是body，那么父元素的overflow必须是visible，不能是其他任意值

参考博客：position：sticky失效问题剖析

参考视频：粘性定位

CSS——sticky定位

1. 大白话解释sticky定位粘性定位通俗来说，它就是相对定位relative和固定定位fixed的结合体，它的触发过程分为三个阶段在最近可滚动容器没有触发滑动之前，sticky盒子的表现为相对定位relative【第一阶段】， 但当最近可滚动容…...

编程日记 2023/12/9 1:16:57

Redis hash表源码解析

1、整体数据结构链式hash解决hash冲突、采用渐进式hash来完成扩容过程。 /** 哈希表节点*/ typedef struct dictEntry {// 键void *key;// 值union {void *val;uint64_t u64;int64_t s64;} v;// 指向下个哈希表节点，形成链表struct dictEntry *next;} dictEntry;…...

编程日记 2023/12/9 1:15:55

dll动态链接库【C#】

1说明： 在C#中，dll是添加【类库】生成的。 2添加C#的dll： （1）在VS中新建一个Windows应用程序项目，并命名为TransferDll。 （2）打开Windows窗体设计器，从工具箱中为窗体…...

编程日记 2023/12/9 1:13:53

source_code: https://github.com/emagii/cpufrequtils cpufreq-set - A small tool which allows to modify cpufreq settings.（修改内存频率的工具） cpufreq-set allows you to modify cpufreq settings without having to type e.g. “/sys/devices…...

编程日记 2023/12/9 1:12:52

git基本概念

一、版本控制概念 1.1 什么是版本控制 1.1.1 手动管理文件版本 1.1.2 版本控制软件概念：版本控制软件是一个用来记录文件发生的变化，以便将来查阅特定版本修订情况的系统，有时也叫“版本控制系统”。通俗的理解就是把手工管理文件版本的方…...

编程日记 2023/12/9 1:09:50

多个HTML属性

在HTML中，属性用于提供有关HTML元素的附加信息。在这篇文章中你将学习多个HTML属性，它们可以增强网站的视觉吸引力。接下来开始吧！🚀 Accept 属性您可以将accept属性与<input>元素（仅用于文件类型&#xff…...

编程日记 2023/12/9 1:05:47

基于运算放大器的电压采集电路

一、运算放大器运放推导的两个重要概念：虚短、虚断。 1、差分放大器以差分放大器为例进行推导分析。虚断–运放的"-“端、”“端的引脚电流接近为0； 根据基尔霍夫电流定律可知：iR1iRF，iR2iR3； iR1(Ui1-(V-…...

编程日记 2023/12/9 1:04:47

数字图像处理（实践篇）十六基于分水岭算法的图像分割

目录一分水岭算法二利用OpenCV实现分水岭算法的过程三实践一分水岭算法基于任何灰度图像都可以视为地形表面，其中高强度表示山峰和山丘，而低强度表示山谷。首先，开始用不同颜色的水（标签）填充每个孤立的山…...

编程日记 2023/12/9 1:02:45

快速学习PyQt5的高级自定义控件

Pyqt5相关文章: 快速掌握Pyqt5的三种主窗口快速掌握Pyqt5的2种弹簧快速掌握Pyqt5的5种布局快速弄懂Pyqt5的5种项目视图（Item View） 快速弄懂Pyqt5的4种项目部件（Item Widget） 快速掌握Pyqt5的6种按钮快速掌握Pyqt5的10种容器&…...

编程日记 2023/12/9 1:01:44

Python中读写（解析）JSON文件的深入探究

目录一、引言二、如何读取JSON文件三、如何写入JSON文件四、如何解析JSON字符串五、错误处理和异常处理六、使用第三方库提高效率七、总结一、引言在Python中，我们经常使用JSON（JavaScript Object Notation）格式来存储和传输…...

编程日记 2023/12/9 0:54:39

我获取股票和期货数据的常用函数

记录一下获取数据所使用的函数，以防止遗忘和方便查找。 # 获取掘金的数据 # 需要打开并登陆掘金终端 def get_data_juejin(symbol"bu2112",start"2021-8-1",end"2021-8-30 23:00:00",frequency"1800s",fields"eob,sy…...

编程日记 2023/12/9 0:51:36

高并发场景下的httpClient使用优化技巧

1. 背景我们有个业务，会调用其他部门提供的一个基于http的服务，日调用量在千万级别。使用了httpclient来完成业务。之前因为qps上不去，就看了一下业务代码，并做了一些优化，记录在这里。先对比前后：优化…...

编程日记 2023/12/9 0:47:32

用php上传图片到阿里云oss

如果你想自动创建目录并将文件上传到新的目录下，你可以使用阿里云 OSS 的 createObject 方法来实现。下面是更新后的示例代码： php <?php require_once __DIR__ . /vendor/autoload.php; // 引入 SDKuse OSS\OssClient; use OSS\Core\OssException;…...

编程日记 2023/12/9 0:45:29

服务器适合哪些使用场景_Maizyun

服务器适合哪些使用场景在当今的数字化时代，服务器作为互联网基础设施的核心组件，被广泛应用于各种场景。本文将探讨服务器适合哪些使用场景。一、Web服务器 Web服务器是服务器中最常见的一种，用于托管和运行网站。它负责处理来自客户端…...

编程日记 2023/12/9 0:43:28

发布“最强”AI大模型，股价大涨，吊打GPT4的谷歌股票值得投资吗？

来源：猛兽财经作者：猛兽财经谷歌在AI领域的最新进展，引发投资者关注在谷歌-C(GOOGL)谷歌-A（GOOG）昨日发布了最新的AI大模型Gemini后，其股价就出现了大幅上涨，更是引发了投资者的密切关注&a…...

编程日记 2023/12/9 0:41:26

年度工作总结怎么写？掌握这些年终总结万能公式，让你的报告出彩无比！

光阴似箭，日月如梭，时间总是不疾不徐地向前奔去，转眼就来到了2023年的最后一个月，12月一到，上班族和打工人又要开始忙活工作总结的事情~ 工作总结，不仅是一年工作的回顾，更是未来规划的起点。你…...

编程日记 2023/12/9 0:36:20

常用Nmap脚本

端口扫描类脚本 Nmap是一款非常流行的端口扫描工具，它可以帮助渗透测试工程师识别目标网络上开放的端口，并提供有关这些端口的详细信息。Nmap还提供了一系列基于脚本的功能，这些脚本可以扩展Nmap的功能，使其能够更深入地探测目标网…...

编程日记 2023/12/9 0:35:19

在pom.xml中添加maven依赖，但是类里面import导入的时候报错

问题： Error:(27, 8) java: 类TestKuDo是公共的, 应在名为 TestKuDo.java 的文件中声明 Error:(7, 23) java: 程序包org.apache.kudu不存在 Error:(8, 23) java: 程序包org.apache.kudu不存在 Error:(9, 23) java: 程序包org.apache.kudu不存在 Error:(10, 30) jav…...

编程日记 2023/12/9 0:34:18

【NEON】学习资料汇总

一、资料链接 Guide ： http://www.heenes.de/ro/material/arm/DEN0018A_neon_programmers_guide_en.pdf csdn博文1，基础案例： https://blog.csdn.net/kakasxin/article/details/103912832? csdn博文2，内部函数： ht…...

编程日记 2023/12/9 0:26:11

java中ReentrantLock的实现原理是什么？

ReentrantLock 的实现原理主要涉及到两个关键概念：同步器（Sync）和 AQS（AbstractQueuedSynchronizer，抽象队列同步器）。 ReentrantLock 使用 AQS 来实现可重入锁的机制。AQS 是 Java 并发包中的一个抽象基类…...

编程日记 2023/12/9 0:24:09

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/7/5 21:19:47

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。使用 Xcode 命令行工具打包通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/6/20 13:53:42

Cursor实现用excel数据填充word模版的方法

cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中文章目录注意事项逐步生成程序1. 确定格式2. 调试程序注意事项直接给一个excel文件和最终呈现的word文件的示例，…...

编程新知 2025/6/18 2:20:36

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。核心优势对比基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2025/7/6 10:43:18