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