Create Multiple Sticky Headers On App – vuesence-sliding-header

Install & Download:

# NPM
$ npm i @vuesence/sliding-header --save

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: