Vue Scroll Fixed Navbar

A Simple vue scroll fixed navbar package which will help you to fix the top header or navbar while scrolling the screen.

Demo

Buy Me a Coffee

Installation

With build systems

npm install --save vue-scroll-fixed-navbar

yarn add vue-scroll-fixed-navbar

To make the plugin available globally

In your main.js:

import VueScrollFixedNavbar from "vue-scroll-fixed-navbar";

Vue.use(VueScrollFixedNavbar);

To include only in specific components

import {VueScrollFixedNavbar} from "vue-scroll-fixed-navbar";

export default {
    name: 'YourComponent',
    components: {
        VueScrollFixedNavbar
    }
}

Usage

<template>
    <VueScrollFixedNavbar>
        your content
    </VueScrollFixedNavbar>
</template>

API

Props

Name	Type	Default Value	Description	Required
isFixed	Boolean	true	Defines whether to fixed the header or not.	false

Example

In order to stop fixing the navbar or header pass props

<template>
    <VueScrollFixedNavbar :isFixed="false">
        your content
    </VueScrollFixedNavbar>
</template>

Open Source License

You may use it under the terms of the MIT Licenses