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

十年之少2025-04-11 10:04

1. 简介

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

具体表现在：

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

2. 使用粘性定位

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

复制代码

<!--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 - 掘金