粘性定位(position:sticky)——微信小程序学习笔记

1. 简介

CSS 中的粘性定位(Sticky positioning)是一种特殊的定位方式,它可以使元素在滚动时保持在视窗的特定位置,类似于相对定位(relative),但当页面滚动到元素的位置时,它会表现得像固定定位(fixed)。这种定位方式特别适用于导航栏、侧边栏等需要在页面滚动时保持在特定位置的元素。

具体表现在:

  • 当滚动的高度>元素与浏览器的高度时,会以fixed固定定位显示。
  • 当滚动高度<元素与浏览器高度时,会以relative相对定位显示。

2. 使用粘性定位

要使用粘性定位,你需要设置元素的 position 属性为 sticky,并通过 toprightbottomleft 属性来定义元素在滚动到这个位置时应该保持的距离。

复制代码
<!--pages/mine/mine.wxml-->

<scroll-view  scroll-y class="container">
  <view style="background-color:rgba(255,192,203,50%);">
    <view class="navMenu">
        <view wx:for="{{menuItems}}">{{item}}</view>
    </view>  
    <view class="b">{{text}}</view>
  </view>
</scroll-view>

/* pages/mine/mine.wxss */

.container{
    height: 1000rpx;
    background-color:rgb(137, 207, 235,50%);
}
.navMenu {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  border: 1px solid #ddd;
  background-color: #fff;
  width: 200rpx;
  left: 50rpx;
}
.navMenu view{
    height: 60rpx;
    line-height: 60rpx;
    border-bottom: 1px solid #ddd;
    margin: 0 20rpx;
}
.navMenu :last-child{
    border: none;
}
.b{
  width: 100%;
  height: 3000rpx;
  font-family:'Courier New', Courier, monospace;
  background-color: #eee;
} 

3. 常见用途:

  • 导航栏:使导航栏在滚动时固定在页面顶部。
  • 表格标题:使表格标题在垂直滚动时保持可见。
  • 侧边栏:使侧边栏在滚动时保持在视口内。
  • 其他需要在滚动时保持部分内容可见的场景。

其他定位可参考:

CSS定位:相对、绝对、固定、粘性CSS 定位(position)是一种用于精确控制元素在页面上位置的机制。通过设置po - 掘金

相关推荐
不太可爱的叶某人6 小时前
【学习笔记】MySQL技术内幕InnoDB存储引擎——第5章 索引与算法
笔记·学习·mysql
岁岁岁平安6 小时前
Redis基础学习(五大值数据类型的常用操作命令)
数据库·redis·学习·redis list·redis hash·redis set·redis string
知识分享小能手8 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
pay4fun8 小时前
2048-控制台版本
c++·学习
知识分享小能手10 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
巴伦是只猫10 小时前
【机器学习笔记 Ⅲ】4 特征选择
人工智能·笔记·机器学习
铲子Zzz10 小时前
Java使用接口AES进行加密+微信小程序接收解密
java·开发语言·微信小程序
不爱说话的采儿10 小时前
UE5详细保姆教程(第四章)
笔记·ue5·游戏引擎·课程设计
weixin_4188138710 小时前
Python-可视化学习笔记
笔记·python·学习
Haoea!11 小时前
Flink-05学习 接上节,将FlinkJedisPoolConfig 从Kafka写入Redis
学习·flink·kafka