Affix前言 1 介绍常用属性 props offsetTop zIndex 常用事件 methods change

每个人，终究要学会一个人独自长大

前言

1 介绍

常用属性 props

offsetTop

// 距离窗口顶部达到指定偏移量后触发
:offsetTop=“0”

zIndex

// z-index 堆叠顺序
:zIndex="9"

常用事件 methods

change

// 固定状态改变时触发的事件
// 参数isFixed
@change="change"

2 使用

安装

npm i vue-affix-box --save

引入

import VueAffixBox from 'vue-affix-box'

置顶

<template>
  <div class="Affix" >
    <nav>
      <ul class="flex">
        <li class="px-4 m-2 bg-gray-400" v-for="n in 4" :key="n">{{  n }}</li>
      </ul>
    </nav>
    <vue-affix-box :offset-top="0" :z-index="9" @change="change">
      <header class="bg-white p-4">
        I am header
      </header>
    </vue-affix-box>
    <section>
      <ul>
        <li class="p-4 m-2 bg-gray-100" v-for="n in 100" :key="n"> {{ n }}</li>
      </ul>
    </section>
  </div>
</template>

<script>
import VueAffixBox from 'vue-affix-box'
export default {
  name: 'Affix',
  components: {
    VueAffixBox
  },
  methods: {
    change(isFixed) {
      console.log(isFixed)
    }
  }
}
</script>

3.注意

1.zIndex设置一个相对大的值，以免被覆盖

尾声

今天的电影特别好看，今天的你也特别好看呢~

晚安 ^_^

参考链接

vue-affix-box

Affix

前言

1 介绍

常用属性 props

offsetTop

zIndex

常用事件 methods

change

2 使用

安装

引入

置顶

3.注意

尾声

参考链接

往期回顾