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