Description:
A pretty cool Vue.js component that allows multiple sticky header elements (e.g. navigation bars for different sections) on page scroll.
How to use it:
1. Import the vuesence-sliding-header component.
import SlidingHeader from "@vuesence/sliding-header";
2. Register the component.
export default {
name: "App",
components: {
SlidingHeader
}
};3. Add sticky headers to the template.
<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>Preview:
Download Details:
Author: altrusl
Live Demo: https://altrusl.github.io/vuesence-sliding-header/
Download Link: https://github.com/altrusl/vuesence-sliding-header/archive/master.zip
Official Website: https://github.com/altrusl/vuesence-sliding-header
Install & Download:
# NPM
$ npm i @vuesence/sliding-header --save