Press "Enter" to skip to content

A Simple and Cross-browser Fixed Header Component for Vue.js

Vue Fixed Header is a simple and easy-to-use cross-browser fixed header component for Vue.js.

vue js header component example, vue sticky header, sticky component vue, nuxt sticky header, vue navbar fixedtop

[17+] Amazing Responsive Website Header Navbar Templates | Headers.css

How to make use of it:

Install & Download:

# Yarn
$ yarn add vue-fixed-header

# NPM
$ npm install vue-fixed-header --save

Usage

<template>
  <fixed-header>
    <div class="navbar">
      Your Content
    </div>
  </fixed-header>
</template>
<script>
import FixedHeader from 'vue-fixed-header'

export default {
  components: {
    FixedHeader
  }
}
</script>
<style>
.navbar.vue-fixed-header--isFixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
}
</style>

fixed header component, vue fixed header Plugin/Github


See Demo And Download

Official Website(potato4d): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *