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

news2024/9/28 1:08:10

目录

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>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

通过API接口获取下来的数据需要怎样应用？

通过API接口获取下来的数据需要怎样应用？

在当今数字化时代&#xff0c;通过API接口获取数据已成为企业获取、处理和分析信息的重要手段。API接口不仅能够提高数据交互的效率&#xff0c;还能促进数据的安全性和灵活性。以下是如何将通过API接口获取的数据有效应用的一些方法和策略。 数据整合与分析 企业可以通过API接…
阅读更多...
QPS和TPS的区别简单理解

QPS和TPS的区别简单理解

QPS&#xff08;Queries Per Second&#xff09; QPS是指每秒查询率&#xff0c;它是衡量服务器处理能力的一个指标&#xff0c;表示服务器在一秒钟内能够响应的查询次数。这个指标通常用于数据库或服务器的性能测试&#xff0c;反映了服务器在规定时间内处理流量的能力。QPS …
阅读更多...
浮动元素详解

浮动元素详解

浮动元素 代码实现&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title>浮动元素</title><style>#container1 {width: 400px;height: 50px;background-color: lightgrey;border: 1px solid;}#contai…
阅读更多...
世界杯足球赛网站---附源码73185

世界杯足球赛网站---附源码73185

摘 要 随着互联网的普及和足球运动的全球性影响力&#xff0c;建立一个专门的世界杯足球赛网站成为了与球迷互动和传播赛事信息的重要途径。本论文聚焦于世界杯足球赛网站的设计与实现&#xff0c;旨在探讨如何利用现代技术为球迷提供一个全方位的足球赛事体验。 通过对 Spring…
阅读更多...
上传头像，访问本地图片

上传头像，访问本地图片

文件大坑&#xff1a; web项目&#xff1a;首先不能直接访问本地资源&#xff0c;只能够访问服务器上的资源。 所以我想就储存数据到服务器&#xff0c;但是这样有个问题就是&#xff0c;当重新启动程序时&#xff0c;服务器上的所有文件会被重新编译&#xff0c;导致之前的文…
阅读更多...
HarmonyOS开发实战（ Beta5.0）自动生成动态路由实践

HarmonyOS开发实战（ Beta5.0）自动生成动态路由实践

鸿蒙HarmonyOS开发往期必看&#xff1a; HarmonyOS NEXT应用开发性能实践总结 最新版&#xff01;“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线&#xff01;&#xff08;从零基础入门到精通&#xff09; 介绍 本示例将介绍如何使用装饰器和插件&#xff0c;自动生成动…
阅读更多...
【UE5】使用2DFlipbook图作为体积纹理，实现实时绘制体积纹理

【UE5】使用2DFlipbook图作为体积纹理，实现实时绘制体积纹理

这是一篇对“Creating a Volumetric Ray Marcher-Shader Bits”的学习心得 文章时间很早&#xff0c;因此这里针对UE5对原文做出兼容性修正&#xff08;为避免累赘不做出注明。链接如上&#xff0c;有需要自行学习&#xff09; 以及最后对Custom做可能的蓝图移植&#xff0c;做…
阅读更多...
Qt中样式表常用的属性名称定义

Qt中样式表常用的属性名称定义

Qt中&#xff0c;用好样式表&#xff0c;不但可以做出意想不到的酷炫效果&#xff0c;有时候也能减轻开发量&#xff0c;可能由于你不了解某些样式使用&#xff0c;想破脑袋通过代码实现的效果&#xff0c;反倒不如别人用样式&#xff0c;一两句样式脚本就搞定。 Qt中&#xff…
阅读更多...
第T8周：猫狗识别

第T8周：猫狗识别

本文为365天深度学习训练营 中的学习记录博客原作者&#xff1a;K同学啊 ●难度&#xff1a;夯实基础⭐⭐ ●语言&#xff1a;Python3、TensorFlow2 要求&#xff1a; 1.了解model.train_on_batch()并运用 2.了解tqdm&#xff0c;并使用tqdm实现可视化进度条 拔高&#xff08…
阅读更多...
Day11-K8S日志收集及搭建高可用的kubernetes集群实战案例

Day11-K8S日志收集及搭建高可用的kubernetes集群实战案例

Day11-K8S日志收集及搭建高可用的kubernetes集群实战案例 0、昨日内容回顾1、日志收集1.1 K8S日志收集项目之架构图解三种方案1.2 部署ES1.3 部署kibana1.4 部署filebeat 2、监控系统2.1 部署prometheus 3、K8S二进制部署3.1 K8S二进制部署准备环境3.2 基础组件安装3.3 生成K8S…
阅读更多...
OpenCV-Python笔记（上）

OpenCV-Python笔记（上）

安装 全局安装 pip install opencv-python项目虚拟环境安装 # 进入项目根路径执行 .venv/bin/pip install opencv-python计算机眼中的图像 一张图片由大小比如&#xff08;100*100&#xff09;决定&#xff0c;说明存在100*100的像素点&#xff0c;每个像素点存在颜色通道&…
阅读更多...
Science：学术大咖揭秘审稿内幕，你的稿件在审稿人那里经历了什么？

Science：学术大咖揭秘审稿内幕，你的稿件在审稿人那里经历了什么？

我是娜姐 迪娜学姐 &#xff0c;一个SCI医学期刊编辑&#xff0c;探索用AI工具提效论文写作和发表。 同行评审是每篇论文能够顺利发表的必经之路。Science期刊采访了来自全球各领域研究人员&#xff0c;分享关于他们作为审稿人&#xff0c;为什么接受审稿、给出审稿意见的依据、…
阅读更多...
怎么让手机ip地址变化？介绍几种实用方法

怎么让手机ip地址变化？介绍几种实用方法

随着网络技术的发展&#xff0c;IP地址作为网络设备的唯一标识&#xff0c;其变动对于保护个人隐私、规避网络限制等方面具有重要意义。本文将介绍几种实用的方法&#xff0c;帮助用户实现手机IP地址的变化&#xff0c;并提醒注意事项。 一、连接不同的WiFi网络‌ 连接不同的W…
阅读更多...
记一次实战中对fastjson waf的绕过

记一次实战中对fastjson waf的绕过

最近遇到一个fastjson的站&#xff0c;很明显是有fastjson漏洞的&#xff0c;因为type这种字符&#xff0c;fastjson特征很明显的字符都被过滤了 于是开始了绕过之旅&#xff0c;顺便来学习一下如何waf 编码绕过 去网上搜索还是有绕过waf的文章&#xff0c;下面来分析一手&a…
阅读更多...
ICM20948 DMP代码详解（21）

ICM20948 DMP代码详解（21）

接前一篇文章&#xff1a;ICM20948 DMP代码详解&#xff08;20&#xff09; 上一回终于解析完了inv_icm20948_read_mems_reg函数&#xff0c;本回回到inv_icm20948_initialize_lower_driver函数中&#xff0c;继续往下解析该函数接下来的内容。为了便于理解和分析&#xff0c;在…
阅读更多...
[进阶]面向对象之多态(练习)

[进阶]面向对象之多态(练习)

需求: //父类animal package polymorphism.Test;public abstract class Animal {private int age;private String color;public Animal() {}public Animal(int age, String color) {this.age age;this.color color;}public int getAge() {return age;}public void setAge(i…
阅读更多...
深入理解 C 语言中的结构体 —— 原理与实践

深入理解 C 语言中的结构体 —— 原理与实践

引言 在 C 语言中&#xff0c;结构体是一种非常强大的数据类型&#xff0c;用于组织不同类型的数据成员。通过结构体&#xff0c;我们可以创建复杂的数据结构&#xff0c;用于表示现实生活中的对象。本文将详细介绍 C 语言中结构体的基本概念、语法、使用方法以及一些高级主题…
阅读更多...
c++中的二叉搜索树

c++中的二叉搜索树

一概念&#xff1a; 静图展示&#xff1a; 动图展示&#xff1a; ①左子树不为空&#xff0c;则左子树节点值小于根节点值。 ②右子树不为空&#xff0c;则右子树节点值大于根节点值。 ③左右子树均为二叉搜索树。 ④对于它可以插入相等的也可以插入不相等的,这里如果插入的…
阅读更多...
MATLAB系列02：MATLAB基础

MATLAB系列02：MATLAB基础

MATLAB系列02&#xff1a;MATLAB基础 2. MATLAB基础2.1 变量和数组2.2 MATLAB变量的初始化2.2.1 用赋值语句初始化变量2.2.2 用捷径表达式赋值2.2.3 使用内置函数来初始化2.2.4 使用关键字input来初始化 2.3 多维数组2.3.1 创建多维数组2.3.2 多维数组在内存中的存储2.3.3 用单…
阅读更多...
深入理解FastAPI中的root_path：提升API部署灵活性的关键配置

深入理解FastAPI中的root_path：提升API部署灵活性的关键配置

在Web开发领域&#xff0c;FastAPI因其高性能、易于使用和类型提示功能而备受开发者喜爱。然而&#xff0c;当涉及到在生产环境中部署FastAPI应用程序时&#xff0c;我们常常需要面对一些挑战&#xff0c;比如如何正确处理代理服务器添加的路径前缀。这时&#xff0c;root_path…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023