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

前端关于position: sticky

条件

1. 确保父容器允许滚动

粘性定位(position: sticky)需要父容器是可滚动的(如 scroll-view 或设置了 overflow 的容器),且父容器不能有 overflow: hidden

2. 为 sort-box 添加粘性定位样式

在 sort-box 的样式中添加以下 CSS 属性:

.sort-box {position: sticky;top: 0; /* 距离顶部 0px 时触发粘性 */z-index: 10; /* 确保悬浮时覆盖下方内容 */background: #fff; /* 背景色避免透明 */
}

分析

简单情况

<view class="father">
<scroll-view>
<view class="sort-box"></view>
</scroll-view>
</view>

sort-box设置粘性定位后,会在scrollview高度顶部进行固定

复杂情况

<view class="father"><scroll-view><view class="sort-box"></view><view><view class="sort-box"></view></view></scroll-view>
</view>

多层嵌套情况,也会相对scroll-view盒子进行判断,两个盒子都会在scrollview高度顶部进行固定

http://www.lqws.cn/news/173827.html

相关文章:

  • 大数据量高实时性场景下订单生成的优化方案
  • NoSQL 之Redis哨兵
  • HarmonyOS运动开发:如何用mpchart绘制运动配速图表
  • Imprompter: Tricking LLM Agents into Improper Tool Use
  • 佰力博科技与您探讨材料介电性能测试的影响因素
  • 使用vsftpd搭建FTP服务器(TLS/SSL显式加密)
  • 手机如何防止ip关联?3种低成本方案
  • CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
  • 数学:数的概念是如何发展的?
  • Python训练营打卡 Day46
  • 现代Web安全实践:基于Token与Refresh Token的单点登录(SSO)实现
  • C++11 右值引用:从入门到精通
  • 博弈论概述
  • 深入解析Java中的装箱与拆箱机制
  • Mysql中select查询语句的执行过程
  • SpringBoot 自动化部署实战:CI/CD 整合方案与避坑指南
  • 深克隆java对象的方式
  • 基于 Vue 和 Spring Boot 实现滑块验证码的机器验证
  • 【Linux】awk 命令详解及使用示例:结构化文本数据处理工具
  • python训练营打卡第46天
  • 打造你的 Android 图像编辑器:深入解析 PhotoEditor 开源库
  • windows server 添加自动启动服务
  • 使用阿里云百炼embeddings+langchain+Milvus实现简单RAG
  • PostgreSQL17 编译安装+相关问题解决
  • KAG与RAG在医疗人工智能系统中的多维对比分析
  • 完美搭建appium自动化环境
  • PyQt常用控件的使用:QFileDialog、QMessageBox、QTreeWidget、QRadioButton等
  • html表格转换为markdown
  • 【cmake】单配置生成器与多配置生成器的构建安装问题分析
  • Ubuntu Cursor升级成v1.0