Sticky 粘性定位

引入组件

<template>
  <div>
    <m-sticky tag-id="sticky-wrapper">
      <div class="sticky-element">我是sticky定位的元素</div>
    </m-sticky>
  </div>
</template>

<script>
  import { MSticky} from "@csr/m_ui";
  export default {
    components: {
      MSticky
    }
  }
</script>

基础用法

试着向下滚动

content

我是sticky定位的元素

content

代码

<div id="sticky-wrapper" class="wrapper">
  <p>试着向下滚动</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <m-sticky tag-id="sticky-wrapper">
    <div class="sticky-element">我是sticky定位的元素</div>
  </m-sticky>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
</div>
<style scoped>
.wrapper {
  position: relative;
  overflow: auto;
  height: 200px;
}
.sticky-element {
  background: pink;
}
</style>

指定sticky定位的元素离顶部的距离

试着向下滚动

content

我是sticky定位的元素

content

代码

<div id="sticky-wrapper" class="wrapper">
  <p>试着向下滚动</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <m-sticky tag-id="sticky-wrapper" :distance="100">
    <div class="sticky-element">我是sticky定位的元素</div>
  </m-sticky>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
</div>
<style scoped>
.wrapper {
  position: relative;
  overflow: auto;
  height: 200px;
}
.sticky-element {
  background: pink;
}
</style>

API

属性	说明	类型	默认值
tagId	指定监听滚动事件的元素id，指定的元素需要position: relative定位。如果不传则监听window。	string
distance	sticky定位元素离顶部的距离，单位是px，不需要传单位	number	0

# Sticky 粘性定位

# 引入组件

基础用法

指定sticky定位的元素离顶部的距离

API

Sticky 粘性定位

引入组件