# 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

Preview with Developer Tool

# 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')
    })
  }
})