vue-fixed-sticky

css3 fixed&sticky封装组件

安装

npm install vue-fixed-sticky

使用

<sticky :zIndex="900" height="100px"></sticky>

在支持sticky的浏览器中会使用position:sticky,否则会使用position:fixed

props

zIndex:

• 类型：number
• 默认值：100 对应z-index属性

top

• 类型：number
• 默认值：0 对应的top属性

disabled

• 类型：boolean
• 默认值：false 如果设置为true，则position不会改变

event

fixed:

<template>
  <sticky :zIndex="900" height="100px" @fixed="positionChange">

  </sticky>
</template>
...
methods:{
  positionChange(val){
    val?"fixed":"static"
    //val 这个布尔值表示了定位是变成了 fixed 还是 static
  }
}

完整的例子

上面gif的源码

<template>
  <div id="app">
    <sticky :zIndex="900">
      <div style="text-align: center;background-color: yellow;height: 100px">
        NAV
      </div>
    </sticky>
    <sticky :top="100" @fixed="fixed">
      <div style="height: 200px;background-color: red;"></div>
    </sticky>
    <div style="height: 600px;text-align: center">
      RED
    </div>
    <sticky :top="100" :zIndex="200">
      <div style="height: 200px;background-color: pink;"></div>
    </sticky>
    <div style="height: 600px;text-align: center">
      PINK
    </div>
    <sticky :top="100" :zIndex="300">
      <div style="height: 200px;background-color: green;"></div>
    </sticky>
    <div style="height: 600px;text-align: center">
      BLUE
    </div>
  </div>
</template>

<script>
  import sticky from "./index.vue";
  export default {
    components: {
      sticky
    },
    methods:{
      fixed(val){
        console.debug(val?"fixed":"static");
      }
    }
  }
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  #app {
    height: 10001px;
  }
</style>