# sticky
Viscous layout components. Sticky Components and CSS in position: sticky Property achieves the same effect, arranging components in their normal layout when they are in screen range, and always fixing them at the top of the screen when they roll out of screen range.
# install
npm install @ miniprogram-component-plus/sticky
On the page page.json in
// page.json
{
"usingComponents": {
"mp-sticky": @ miniprogram-component-plus/sticky"
}
}
# List of properties
| attribute | type | Default values | Required | Introductions |
|---|---|---|---|---|
| offset-top | Number | 0 | no | Distance from top when suction top, in px |
| z-index | Number | 99 | no | Top suction z-index |
| container | function | null | no | A function that returns the corresponding NodesRef node |
| disabled | Boolean | false | no | Is it disabled? |
| bindscroll | eventhandle | no | Triggered on scrolling, {scrollTop: Distance from top position, isFixed: Whether or not to top } |
# sample code
# Code demonstration
# Top suction distance
adopt offset-top Property to set the distance from the top of the component when it sucks the top
<mp-sticky offset-top="32">
<button size="mini" type="primary" style="margin-left: 115px background-color: #1989fa">Top suction distance</button>
</mp-sticky>
# Specify container
adopt container Property to specify the container for the component, which remains within the container while the page is scrolling, and which returns when the component is about to go beyond the bottom of the container.
<view id="container" style="height: 250px background-color: #E0E0E0">
<view style="height: 100px background-color: #FFFF99"></view>
<mp-sticky container="{{container}}" offset-top="64">
<button size="mini" type="primary" style="margin-left: 215px background-color: #ff976a">Specify container</button>
</mp-sticky>
</view>
Page({
data: {
container: null
},
onReady() {
this.setData({
container: () => wx.createSelectorQuery().select('#container')
})
}
})