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

微信小程序使用 ==== 粘性布局

news 2026/3/28 10:02:37

目录

Chrome杀了个回马枪

position:sticky简介

你可能不知道的position:sticky

深入理解粘性定位的计算规则 

粘性定位其他特征

代码实现

微信小程序在scroll-view中使用sticky

Chrome杀了个回马枪

position:sticky早有耳闻也有所了解，后来，Chrome放弃了对其支持，我也就不关心这个声明了，今天偶然发现，卧槽，Chrome什么时候杀了个回马枪，居然又支持了。眼瞅着，各个浏览器纷纷立了山头，要必要关心关心position:sticky了，不要被人留下厚此薄彼的口舌。

position:sticky兼容性

Safari目前还需要-webkit-私有前缀。

position:sticky简介

单词sticky的中文意思是“粘性的”，position:sticky表现也符合这个粘性的表现。基本上，可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。例如，可以滚动下面这个框框感受下交互表现：

其中导航元素设置了如下CSS：

nav {position: -webkit-sticky;position: sticky;top: 0;
}

于是，正如大家看到，随着页面的滚动，当导航距离上边缘0距离的时候，黏在了上边缘，表现如同position:fixed。

position:sticky要想生效，top属性或则left属性（看滚动方向）是必须要有明确的计算值的，否则fixed的表现不会出现。

这就是position:sticky最基本的表现，特别适合导航的跟随定位效果。

你可能不知道的position:sticky

position:sticky有个非常重要的特性，那就是sticky元素效果完全受制于父级元素们。

这和position:fixed定位有着根本性的不同，fixed元素直抵页面根元素，其他父元素对其left/top定位无法限制。

根据我简单的测试，发现了sticky元素以下一些特性表现：

  1. 父级元素不能有任何overflow:visible以外的overflow设置，否则没有粘滞效果。因为改变了滚动容器（即使没有出现滚动条）。因此，如果你的position:sticky无效，看看是不是某一个祖先元素设置了overflow:hidden，移除之即可。
  2. 父级元素设置和粘性定位元素等高的固定的height高度值，或者高度计算值和粘性定位元素高度一样，也没有粘滞效果。我专门写了篇文章深入讲解了粘性效果无效的原因
  3. 同一个父容器中的sticky元素，如果定位值相等，则会重叠；如果属于不同父元素，且这些父元素正好紧密相连，则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。至于原因需要理解粘性定位的计算规则
  4. sticky定位，不仅可以设置top，基于滚动容器上边缘定位；还可以设置bottom，也就是相对底部粘滞。如果是水平滚动，也可以设置left和right值。

深入理解粘性定位的计算规则 

粘性定位中有一个“流盒”（flow box）的概念，指的是粘性定位元素最近的可滚动元素（overflow属性值不是visible的元素）的尺寸盒子，如果没有可滚动元素，则表示浏览器视窗盒子。

粘性定位中还有一个名叫“粘性约束矩形”的概念，表示的是粘性定位元素的包含块在文档流中呈现的矩形区域和流盒的四个边缘在应用粘性定位元素的left、top、right、bottom属性的偏移计算值后的新矩形的交集。

由于滚动的时候，流盒不变，而粘性定位元素的包含块跟着滚动，因此粘性约束矩形随着滚动的进行是实时变化的。

假设我们的粘性定位元素只设置了top属性值，则粘贴定位元素碰到粘性约束矩形的顶部的时候开始向下移动，直到它完全包含在粘贴约束矩形中。

下面我们根据一个简单的例子来进一步理解上面的规则，例如，有一个页面是窗体滚动，包含<div>元素和<nav>元素，这两个元素是父子关系，HTML代码如下：

<div><nav>导航</nav>
</div>

其中：

div {height: 100px;    margin-top: 50px;border: solid deepskyblue;
}
nav {position: sticky;top: 20px;background: lightskyblue;
}

则随着滚动的进行，<nav>元素的粘性约束矩形范围和实际的渲染表现如图1所示：

详细的计算规则如下：

由于<nav>这个粘性定位元素的top偏移是20px，因此，流盒矩形就是滚动窗口矩形再往下偏移20px，就是图中的红色色块区域。而<nav>这个粘性定位元素的包含块就是其父元素<div>元素（设置了边框），粘性约束矩形指的是流盒矩形和包含块的重叠区域，因此，图所示的粘性约束矩形就是红色色块区域和方框区域重叠的矩形区域。

然后：

  1. 在默认状态下（图1左一），由于<div>元素设置了margin-top:50px，因此，<nav>这个粘性定位元素的顶部距离粘性约束矩形的顶部还有33px的大小，不会有粘性效果。

  2. 随着浏览器滚动，<nav>元素和粘性约束矩形的顶部距离越来越小，直到为0。此时<nav>元素开始下移，使自己约束在粘性约束矩形范围内，如图1左二所示。

  3. 浏览器继续滚动，<nav>元素的底部也快要超出粘性约束矩形范围的限制了，如图1右二所示。

  4. 最终，<nav>元素的底部和粘性约束矩形范围的底部重合，由于粘性定位元素不能超出粘性约束矩形的范围限制，因此此时粘性效果失效，<nav>元素被跟着一起滚走了，如图1右一所示。

如果还不是很理解，您可以狠狠地点击这里：帮助理解粘性定位的学习页面

right、left以及bottom方向的定位与top方向类似。

明白了粘性定位的计算规则，也就明白为什么粘性定位元素父元素和自身高度计算值一样的时候没有粘性效果了。因为此时包含块高度和粘性定位元素一样，导致粘性约束矩形的高度最大也就是和粘性定位元素一样高，粘性定位元素的已经完全没有了实现粘性效果的空间。

粘性定位其他特征

本文一开始还提到了粘性定位其他两个特征：

  • 如果我们的粘性定位元素的某个祖先元素的overflow属性值不是visible，那么页面滚动的时候就不会有粘性定位效果。
  • 同一容器中多个粘贴定位元素独立偏移，因此可能重叠；位置上下靠在一起的不同容器中的粘贴定位元素则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。

第一个特性源自粘性定位的定义，这么设计主要是为了避免当多个滚动互相嵌套的时候，粘性定位混乱。

第二个特性原因就是本文提到的粘性定位的计算规则，具体解释：

当我们的粘性定位元素都在一个容器的时候，大家都公用一个巨大的粘性约束矩形，因此，滚动的时候会一个一个往上重叠。

当我们的粘性定位元素属于不同容器的时候，就会有多个不同的粘性约束矩形，这些粘性约束矩形正好一个一个排列得很整齐，于是视觉上达成一个巧合一般的约定，即上一个粘性定位元素被滚走，下一个粘性定位元素正好开始有粘性效果。

代码实现


<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>粘性定位效果原理示意</title>
<style>
body {line-height:1.5;
}
body {overflow-x: hidden;height: 2000px;
}div {height: 100px;border: solid deepskyblue;margin-top: 50px;
}
nav {position: sticky;top: 20px;background: lightskyblue;
}.flow-box {position: fixed;top: 20px; left: 0; right: 0; bottom: 0;background-color: #d30000;opacity: .7;mix-blend-mode: multiply;
}
</style>
</head>
<body><div><nav>导航</nav></div><s class="flow-box"></s>
</body>
</html>

微信小程序在scroll-view中使用sticky

1.父元素不能是over:hidden

2.scroll-view里要加个view再嵌套sticky进去

准确来说，如果希望sticky元素对于整个scroll-view容器起作用，在scroll-view中应有且仅有一个view作为其所有子元素的根元素。


解释：因为平台scroll-view的特性问题，sticky元素在离开了原定的scroll-view的height距离后，就不能识别scroll-view的距顶高度了，所以用一个无样式的view撑开整个scroll-view中元素的高度，让这个view以能够替代scroll-view被获取高度，从而达到样式正常。

更改前
<scroll-view><一堆子元素>
</scroll-view>
​
更改后
<scroll-view><view><一堆子元素></view>
</scroll-view>

 

.container{width: 600rpx;height: 800rpx;
}
.a {position: sticky;position: -webkit-sticky;top: 0;width: 100%;height: 200rpx;background-color: black;
}
.b {width: 100%;height: 3000rpx;background-color: red;
} <scroll-view class="container"><view><view class="a"></view>  <view class="b"></view></view>
</scroll-view>

相关文章：

微信小程序使用 ==== 粘性布局

目录 Chrome杀了个回马枪 position:sticky简介 你可能不知道的position:sticky 深入理解粘性定位的计算规则 粘性定位其他特征 代码实现 微信小程序在scroll-view中使用sticky Chrome杀了个回马枪 position:sticky早有耳闻也有所了解&#xff0c;后来&#xff0c;Chro…...

编程日记 2024/9/15 7:37:11

LineageOS刷机教程

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ LineageOS 是一个基于 Android 开源项目&#xff08;AOSP&#xff09;的开源操作系统&#xff0c;主要由社区开发者维护。它起源于 CyanogenMod 项目&#xff…...

编程日记 2024/9/15 7:36:11

Unity3D帧同步模式的网络游戏详解

帧同步概述 帧同步&#xff08;Frame Synchronization&#xff09;是指在网络游戏中&#xff0c;多个客户端在同一时刻执行相同的游戏逻辑&#xff0c;确保各个客户端的游戏状态保持一致。这种同步方式对于实现公平的多人游戏和减少网络延迟对游戏体验的影响至关重要。Unity3D…...

编程日记 2024/9/15 7:35:10

“树”据结构：并查集从入门到AC

“树”据结构&#xff1a;并查集 前言算法设计代码示例优化相关文章 前言 在一组数据中&#xff0c;数据被分为了不同的集合&#xff0c;那么其中的集合往往可以用树形来表示。而区分集合&#xff0c;与查找集合的元素&#xff0c;就会成为核心的问题。并查集主要就是解决这类…...

编程日记 2024/9/15 7:26:02

高级java每日一道面试题-2024年9月11日-数据库篇-事务回滚的常见原因有哪些？

如果有遗漏,评论区告诉我进行补充 面试官: 事务回滚的常见原因有哪些&#xff1f; 我回答: 在Java高级面试中&#xff0c;讨论事务回滚的常见原因是考察候选人对事务管理的理解深度。事务回滚意味着事务中的所有操作都会被撤销&#xff0c;回到事务开始前的状态。以下是事务…...

编程日记 2024/9/15 7:18:55

目标检测中的解耦和耦合、anchor-free和anchor-base

解耦和耦合 写在前面 在目标检测中&#xff0c;objectness&#xff08;或 objectness score&#xff09;指的是一个评分&#xff0c;用来表示某个预测框&#xff08;bounding box&#xff09;中是否包含一个目标物体。 具体来说&#xff0c;YOLO等目标检测算法需要在每个候选区…...

编程日记 2024/9/15 7:17:54

git rev-parse

git rev-parse 是 Git 中一个非常有用的命令&#xff0c;用于解析并返回与 Git 对象&#xff08;如提交、分支、标签等&#xff09;相关的信息。它可以帮助我们从给定的引用&#xff08;ref&#xff09;中解析出 SHA-1 哈希值、路径信息等。这个命令在编写 Git 脚本时尤其有用&…...

编程日记 2024/9/15 7:14:51

【Unity】在Unity 3D中使用Spine开发2D动画

文章目录 内容概括前言下载安装 Spine Pro导入Unity插件Spine动画导入Unity使用展现动画效果展现 内容概括 本文主要讲解 Spine Pro 免&#xff08;破&#xff09;费&#xff08;解&#xff09;版的安装&#xff0c;以及如何将动画导入到Unity中使用。 前言 通常要用 Spine …...

编程日记 2024/9/15 7:13:50

考试：软件工程（01）

软件开发生命周期 ◆软件定义时期&#xff1a;包括可行性研究和详细需求分析过程&#xff0c;任务是确定软件开发工程必须完成的总目标&#xff0c; 具体可分成问题定义、可行性研究、需求分析等。 ◆软件开发时期&#xff1a;就是软件的设计与实现&#xff0c;可分成概要设计…...

编程日记 2024/9/15 7:10:47

数据结构应用实例(三)——赫夫曼编码

Content&#xff1a; 一、问题描述二、算法思想三、代码实现四、小结 一、问题描述 对一篇英文文章&#xff0c;统计各字符&#xff08;仅限于26个小写字母&#xff09;出现的次数&#xff0c;并据此进行 Huffman 编码。 二、算法思想 首先&#xff0c;打开文本文件&#xff0…...

编程日记 2024/9/15 7:07:44

关于Spring Cloud Gateway中 Filters的理解

Spring Cloud Gateway中 Filters的理解 Filters Filters拦截器的作用是&#xff0c;对请求进行处理 可以进行流量染色 ⭐增加请求头 例子 spring:cloud:gateway:routes:- id: add_request_header_routeuri: http://localhost:8123predicates:- Path/api/**filters:- AddR…...

编程日记 2024/9/15 7:05:41

【实践】应用访问Redis突然超时怎么处理？

目录标题 问题描述分析过程查看监控数据系统监控指标JVM监控指标Redis监控指标分析应用异常单机异常规律集群异常规律统计超时的key 初步结论验证结论访问Redis链路slowlogRedis单节点info all定位redis节点定位异常keybigkeystcpdump定位大key影响 经验总结 问题描述 某产品线…...

编程日记 2024/9/15 7:04:40

Spring Cloud Alibaba核心组件Nacos/Seata/Sentinel

文章目录 Spring Cloud Alibaba介绍Spring Cloud 微服务体系Spring Cloud Alibaba 定位 注册配置中心--Nacos服务治理架构注册中心原理 Nacos介绍Nacos 的关键特性1.服务注册和发现2.动态配置服务3.实时健康监控4.动态DNS服务5.易于集成&#xff1a; Nacos入门示例服务注册与发…...

编程日记 2024/9/15 7:01:37

Ubuntu搭建FTP服务器

1. 首先&#xff0c;我们需要安装和配置xinetd&#xff0c;安装的具体命令如下&#xff1a; sudo apt-get install xinetd 2. 新建tftp工作目录&#xff0c;并添加读、写、执行权限&#xff08;没有权限后面无法正常访问该文件夹&#xff09;&#xff0c;如下图所示。 3. 安装…...

编程日记 2024/9/15 6:59:35

Redis在单线程下删除大Key会发生什么？怎么删除大Key？

大Key的定义 大Key是指在缓存系统&#xff08;如Redis&#xff09;或分布式存储中&#xff0c;单个键&#xff08;Key&#xff09;对应的数据量非常大&#xff0c;通常存储的是大块数据结构&#xff0c;例如包含大量数据的哈希表、列表、集合或有序集合。这种大Key往往会对系统…...

编程日记 2024/9/15 6:57:33

《Exploit temporal cues in multi-camera 3D object detection》论文泛读

ReadPaperhttps://readpaper.com/pdf-annotate/note?pdfId4666749915775385601eId2491528568128599808 针对单帧数据含有的信息太少的问题&#xff0c;提出了一种新的方法&#xff0c;BEVDet4D&#xff0c;这种方法可以访问时间线索&#xff0c;并且取得了较好的表现&#xff…...

编程日记 2024/9/15 6:55:31

十四、centos7 yum报错：cannot find a valid baseurl for repo:base/7/x86_64的解决方案

&#x1f33b;&#x1f33b;目录&#x1f33b;&#x1f33b; 一、 centos7 yum报错&#xff1a;cannot find a valid baseurl for repo:base/7/x86_64二、分析错误三、解决方案3.1 检查网络连接3.2 检查DNS设置3.3 检查YUM仓库配置3.3.1 使用官方CentOS镜像配置3.3.2 使用阿里云…...

编程日记 2024/9/15 6:50:27

qt使用对数坐标的例子，qchart用QLogValueAxis坐标不出图解决

硬件&#xff1a;ThinkPad T15 系统&#xff1a;win10 专业版 qt版本&#xff1a;Qt 5.14.1 &#xff0c; QtCreator 4.11.1 软件界面放了一个QPushButton&#xff0c;一个QVBoxLayout&#xff0c;如下&#xff1a; 主要代码如下&#xff0c;我添加了两条曲线&#xff0c;…...

编程日记 2024/9/15 6:43:20

Python 爬虫入门 - 爬虫 requests 请求

在当今互联网时代，数据的获取变得尤为重要，而网络爬虫作为自动化获取数据的一种方式，受到了越来越多编程爱好者和数据分析人员的青睐。Python 语言以其简洁的语法和丰富的库，成为了实现网络爬虫的首选工具。其中，requests库是一个非常流行且强大的工具，用于发送 HTTP 请求…...

编程日记 2024/9/15 6:42:18

flink中startNewChain() 的详解

在 Apache Flink 中&#xff0c;startNewChain() 是一个与算子链&#xff08;operator chaining&#xff09;相关的方法。与 disableChaining() 类似&#xff0c;它允许开发者控制算子链的创建方式&#xff0c;但 startNewChain() 的作用是从当前算子开始创建一个新的算子链&am…...

编程日记 2024/9/15 6:40:15

OpenClaw自动化写作：用nanobot生成技术文档草稿

OpenClaw自动化写作&#xff1a;用nanobot生成技术文档草稿 1. 为什么需要自动化写作助手 作为一个经常需要撰写技术文档的开发者&#xff0c;我长期被两个问题困扰&#xff1a;一是从大纲到完整内容的填充过程耗时费力&#xff0c;二是反复检查格式和语法错误消耗大量精力。…...

编程新知 2026/3/28 9:58:39

AI和苹果夹逼，国产手机顶不住了，网传大规模人才优化已在进行中

某已没落的手机企业在转卖后&#xff0c;近期又传出重大消息&#xff0c;只是这次是相当悲惨的消息&#xff0c;手机硬件研发被砍掉&#xff0c;半数员工就地解散&#xff0c;揭开了手机行业人才优化的序幕&#xff0c;其实手机行业的这种操作早在去年底就已悄然进行&#xff0…...

编程新知 2026/3/28 8:33:53

Qwen3-Reranker-8B企业落地：保险条款智能比对系统重排模块部署

Qwen3-Reranker-8B企业落地&#xff1a;保险条款智能比对系统重排模块部署 1. 项目背景与需求场景 保险行业每天需要处理大量的条款文档比对工作&#xff0c;比如新老条款对比、不同产品条款差异分析、合规性检查等。传统的人工比对方式效率低下&#xff0c;容易出错&#xf…...

编程新知 2026/3/28 6:58:53

Keil工程管理效率翻倍：Python脚本实现构建结果自动归档与HTML报告生成

Keil工程管理效率翻倍&#xff1a;Python脚本实现构建结果自动归档与HTML报告生成 在嵌入式开发领域&#xff0c;Keil作为主流开发工具链的核心组件&#xff0c;其工程管理效率直接影响着团队协作和产品迭代速度。传统开发流程中&#xff0c;工程师往往需要手动收集每次构建生成…...

编程新知 2026/3/28 6:48:50

AnotherRedisDesktopManager：让Redis管理变得简单高效的5个理由

AnotherRedisDesktopManager&#xff1a;让Redis管理变得简单高效的5个理由 【免费下载链接】AnotherRedisDesktopManager qishibo/AnotherRedisDesktopManager: Another Redis Desktop Manager 是一款跨平台的Redis桌面管理工具&#xff0c;提供图形用户界面&#xff0c;支持连…...

编程新知 2026/3/28 5:26:03

如何让鼠标和触控板和平共处：Scroll Reverser实现设备独立控制的效率革命

如何让鼠标和触控板和平共处&#xff1a;Scroll Reverser实现设备独立控制的效率革命 【免费下载链接】Scroll-Reverser Per-device scrolling prefs on macOS. 项目地址: https://gitcode.com/gh_mirrors/sc/Scroll-Reverser 在多设备协同办公成为常态的今天&#xff0…...

编程新知 2026/3/28 4:38:01

OpenClaw：AI 权限治理的核心问题

子玥酱 &#xff08;掘金 / 知乎 / CSDN / 简书 同名&#xff09; 大家好&#xff0c;我是 子玥酱&#xff0c;一名长期深耕在一线的前端程序媛 &#x1f469;‍&#x1f4bb;。曾就职于多家知名互联网大厂&#xff0c;目前在某国企负责前端软件研发相关工作&#xff0c;主要聚…...

编程新知 2026/3/28 3:53:48

量子行走：从理论到Python实现——3. 量子门、电路与编程基础

目录 3. 量子门、电路与编程基础 3.1 单量子比特门 3.1.1 泡利门与旋转门 3.1.2 哈达玛门与相位门 3.2 多量子比特门 3.2.1 受控门 3.2.2 纠缠门与SWAP操作 3.3 量子电路构建与优化 3.3.1 电路表示与DAG结构 3.3.2 变分电路 3. 量子门、电路与编程基础 量子计算体系的…...

编程新知 2026/3/28 3:17:14

开源AI助手竟能自主建频道、做视频？李宏毅深度解析“小龙虾”的神秘工作原理！

最近全网爆火的「养龙虾」到底是什么&#xff1f;为什么一个开源的 AI 助理项目&#xff0c;能让 AI 自己创建 YouTube 频道、自己做教学视频、24 小时自主干活&#xff1f; 台大李宏毅老师的这堂《解剖小龙虾 — 以 OpenClaw 为例介绍 AI Agent 的运作原理》&#xff0c;用最通…...

编程新知 2026/3/28 2:26:52

ai辅助stm32开发，向快马描述需求即可获得精准的f103c8t6引脚配置代码

最近在做一个基于STM32F103C8T6的小项目&#xff0c;需要用到UART、I2C、PWM、ADC和GPIO等多种外设。作为嵌入式开发新手&#xff0c;最头疼的就是引脚分配和初始化代码的编写。好在发现了InsCode(快马)平台的AI辅助开发功能&#xff0c;用自然语言描述需求就能得到专业的代码解…...

编程新知 2026/3/28 1:52:11