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