Vue.js Component Sliding Header For Top Navigation Bar

double-sticky-header-on-scroll

Vue.js component represents a sliding header (or two different headers) for the top navigation bar.

sticky header on scroll up, double sticky header vuejs, sticky header disappears, css collapse header on scroll, scroll behind fixed element

How to make use of it:

Install and download:

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

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>

Create Multiple Sticky Headers On App, Sliding Header Plugin/Github


See Demo And Download

Official Website(altrusl): Click Here

This superior jQuery/javascript plugin is developed by altrusl. For extra advanced usage, please go to the official website.