一个非常酷的Vue.js组件,允许在页面滚动中使用多个粘性标头元素(例如,用于不同部分的导航栏)。
# NPM
$ npm i @vuesence/sliding-header --save
1.导入vuesence-sliding-header组件。
import SlidingHeader from "@vuesence/sliding-header";
2.注册组件。
export default {
name: "App",
components: {
SlidingHeader
}
};
3.将粘性标头添加到模板。
<template>
<div id="app">
<sliding-header :threshold-hide="200" :threshold-open="400">
<template v-slot:first-header>
<p>The First Header</p>
</template>
<template v-slot:second-header>
<p>The Second Header</p>
</template>
</sliding-header>
</div>
</template>