Vue-nav-auto NPM

vue-nav-auto

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

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.