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