Skip to content
Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript.
Vue TypeScript JavaScript
Branch: master
Clone or download
potato4d Merge pull request #200 from potato4d/renovate/all-contributors-cli-6.x
chore(deps): update dependency all-contributors-cli to v6.9.2
Latest commit 4f53dfa Oct 19, 2019

README.md

Vue Fixed Header

code style: prettier donate: Patreon License: MIT NPM version All Contributors NPM downloads codecov

Simple and cross-browser friendly fixed header component for Vue.js.

Image from Gyazo

Edit vue-fixed-header demo

Install

yarn add vue-fixed-header

Usage

Use in Single File Component

<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>

Attach classes

The Vue Fixed Header always assigns the vue-fixed-header CSS class to the slot's root element. Also, when matching the fixed condition, we give the vue-fixed-header - isFixed CSS class. These can also be changed with headerClass prop and fixedClass prop.

Props

threshold: number

The threshold value for determining the scroll state.

<template>
  <fixed-header :threshold="100">
    <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>

headerClass

CSS class for fixed-header root Element. It is always attached to fixed header root Element.

  • type: String,
  • required: false
  • default: 'vue-fixed-header'

fixedClass

CSS class for fixed header. When fixed-header position is relative, it removed to DOM Element. When fixed-header position is fixed, it added to DOM Element.

  • type: String
  • required: false
  • default: 'vue-fixed-header--isFixed'

License

MIT © potato4d

Contributors

Thanks goes to these wonderful people (emoji key):

HANATANI Takuma
HANATANI Takuma

💻 🐛 📖 💡 💬 👀
EGOIST
EGOIST

🔧
Johnny Cavalcante
Johnny Cavalcante

🐛
James Wright
James Wright

🐛
Sid
Sid

⚠️
André Van Dal
André Van Dal

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

You can’t perform that action at this time.