vue-nav-auto

Allows your navbar to be automatically hidden, just like Android.

Table of Contents

• Installation
• Usage
• License

Installation

npm install vue-nav-auto

yarn add vue-nav-auto

or if you prefer CDN

<script
  type="text/javascript"
  src="https://unpkg.com/vue-nav-auto@latest/dist/vue-nav-auto.umd.js"
></script>

Usage

Global

import VueNavAuto from "vue-nav-auto"

app.use(VueNavAuto)

<template>
   <vue-nav-auto type="top" class="header">
      <!-- Content -->
   </vue-nav-auto>
</template>

<style lang="scss" scoped>
   .header {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 1024;
   }
</style>

Private

<template>
   <vue-nav-auto type="top" class="header*>
      <!-- Content -->
   </vue-nav-auto>
</template>

<script lang="ts" setup>
import { VueNavAuto } from "vue-nav-auto"
</script>

<style lang="scss" scoped>
   .header {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 1024;
   }
</style>

Configuration

| Property | Type | Default | Description | | :------------ | :----- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | tag | String | "div" | A tag name for component | | type | String | "top" | will leave the nav bar at the "top" or "bottom" | | offset-hidden | Number | 0 | this determines how much away the screen after hiding the navbar (px) | | tracker | Any | window | This will be the object tracking navbar's scroll events like document, window ... | | duration | String | "0.01s" | This is the effect smoothing time. It is really not necessary but you should leave it to 10 seconds (0.01s). | | slipCoff | Number | 1 | This is a very special option. it will amplify, shrink or even reverse whether the navbar will be hidden when scrolling up or down. See the example to understand better. |

License

This project is licensed under the MIT License - see the LICENSE.md file for details.